Vertical-align: middle not working outside of BSS [FIXED]

Bootstrap Studio Help
1

So I’m stumped on this one, or have looked at it so long I’m blind lol. I have a table, large sortable table (thanks for that @kuligaposten ) and I’m trying to add the vertical-align attribute which Bootstrap’s site says I need to do in the Table rather than in the Cells so first I added the align-middle class directly to the table component in the Attributes panel … no go. Then I created a class:

.table {
  vertical-align: middle;
}

which is how they show it and it works perfectly inside BSS’s preview window, but … no where else. When I open a browser preview it’s not vertically centered. I tried uploading the css file to the test server and no love there either. I can’t figure out why it shows correctly within BSS, but not in any other browser situation. Also checked in Polypane, same results.

In the Styles window, this css change does not show up at all either. It should be showing me the overwrite of the default for the new attribute, but nothing there at all. The default shows up, but is slightly dimmed (I forgot why that is lol), but my code is not shown at all, which is where I usually would be able to detect what’s overwriting what.

Since all the outside sources say it’s not there, I’m assuming it’s something with BSS that I’m missing, but … hairs are being lost on this one lol.

The test site is here, the CSS class does show up in the compiled css file.

https://eiwd-tester.work/psa-bss5-rebuild/directory-of-churches.html

I’m stumped, any ideas?k

P.S. I also just tried:

table#myTable {
  vertical-align: middle:
}

That one actually shows it on the Styles window and it shows it cancelling out the default correctly as it should … but, in the browser it still is not showing vertically centered, it’s still at the top.

2

HTML

add the class align-middle to the table cells you want to be align vertical

<td class="align-middle"></td>

CSS

or with CSS for all table cells

td {
  vertical-align: middle;
}
3

Well that’s what I started doing and then went to BS website and they said that cells take their positioning from the Table so that’s where I’ve been putting it or at least trying to.

The main thing here though is not only that I can’t get it to work, but that there is something missing in the changing from BSS to the browser since it shows correctly in BSS, but not in browsers. I guess I want to be sure we don’t have a bug here, and I probably should have put it there, but figured I was doing something wrong.

I’ll most likely end up doing what you suggest just to get it done, but man it would be so much nicer if it worked like BS says it should lol. A whole lot less work for sure :stuck_out_tongue:

1 Like
4

And … adding

align-middle

to the table component that has the id myTable in it, corrects it all except for externally. In other words, all is overwritten correctly in the styles window. The default is crossed off, the new style shows up, visually it’s aligned middle for the cells, … but only in BSS

I think there’s something wrong with BSS not doing something? I dunno, I just would like to know if it’s me or the app lol.

5

Make sure you add the class align-middle to the table not the div surrounding it

6

Ya I did get it on the table itself. Goofy how we don’t always know that there’s elements that can’t be selected from the Overview panel. It’s in the right spot though. I did add a td to the class and that fixed it all the way around, but I don’t think we’re supposed to have to do that. Now the class is like this:

 table#myTable td {
    vertical-align: middle;
  }
7

I did a quick test with your table you need to add important to the css class

td {
  vertical-align: middle!important;
}
1 Like
8

Even if I already added the td to the table element like in my previous post? It’s working correctly everywhere with that.

9

@jo-r

In your css for the datatable you have this class

.dataTable-table > tbody > tr > td, 
.dataTable-table > tbody > tr > th, 
.dataTable-table > tfoot > tr > td, 
.dataTable-table > tfoot > tr > th, 
.dataTable-table > thead > tr > td, 
.dataTable-table > thead > tr > th {
  vertical-align: top;
  padding: 8px 10px;
}

change that to this

.dataTable-table > tbody > tr > td, 
.dataTable-table > tbody > tr > th, 
.dataTable-table > tfoot > tr > td, 
.dataTable-table > tfoot > tr > th, 
.dataTable-table > thead > tr > td, 
.dataTable-table > thead > tr > th {
  vertical-align: middle;
  padding: 8px 10px;
}

then there is no need to add another class to override it

10

I commented out the class I had applied, changed what you show (which should do it really) and it doesn’t change anything at all not even in the app.

11

Well I swapped out to another table sorting component and the issue was in the component I was using, not BSS or BS5. I learned a lot through this thread though so thanks everyone for all the pushes :slight_smile: