table-sm Bootstrap class breaks fixedColumns

[Ana06]

Using table-sm Boostrap class with fixedColumns option breaks the table and render an extra arrow.

With table-sm:

Without table-sm:

HTML code (it is long 🙈):

<table class="table table-sm" id="project-monitor-table">
<thead class="header">
<tr>
<th></th>
<th class="text-center" colspan="2">
Debian_7.0
</th>
<th class="text-center" colspan="2">
Debian_8.0
</th>
<th class="text-center" colspan="2">
Debian_9.0
</th>
<th class="text-center" colspan="1">
SLE_12_SP4
</th>
<th class="text-center" colspan="1">
SLE_15
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_15.0
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_15.1
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_42.3
</th>
<th class="text-center" colspan="2">
openSUSE_Tumbleweed
</th>
<th class="text-center" colspan="2">
xUbuntu_12.04
</th>
<th class="text-center" colspan="2">
xUbuntu_14.04
</th>
<th class="text-center" colspan="2">
xUbuntu_16.04
</th>
<th class="text-center" colspan="1">
xUbuntu_17.10
</th>
<th class="text-center" colspan="1">
xUbuntu_18.04
</th>
<th class="text-center" colspan="1">
xUbuntu_18.10
</th>
</tr>
<tr>
<th></th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
</tbody>
</table>

Javascript code:

 $('#project-monitor-table').DataTable({scrollX: true, fixedColumns: true, pageLength: 50, lengthMenu: [[10, 25, 50, 100, -1], [10,25, 50, 100, "All"]], search: { regex: true, smart: false } });

Real/original code can be found here: https://github.com/openSUSE/open-build-service/blob/master/src/api/app/views/webui2/webui/project/monitor.html.haml

[mkhairi]

this is probably a bug, but you may override current css with this:

table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
  top: initial;
  right: 1em;
  bottom: 0.3em;
}

http://live.datatables.net/taxawetu/3

[Ana06]

table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
  top: initial;
  right: 1em;
  bottom: 0.3em;
}

thanks @mkhairi! 😉 This removes the extra arrow, but not the fact that the first column has its own scroll and that it can be independently moved. You can see it by making one of the packnames longer in your code:

[mkhairi]

@Ana06, try to set column width on the first column

     <tr>
          <th width="200px"></th>
          <th class="text-center"> i586 </th>
          <th class="text-center"> x86_64 </th>
          <th class="text-center">i586</th>
          <th class="text-center"> x86_64 </th>
 ....

or pass datatables option

columnDefs: [
     { width: 200, targets: 0 }
],

or use css ellipsis

[Ana06]

@mkhairi

try to set column width on the first column

This doesn't seem to work: http://live.datatables.net/liduciti/1/edit
I have tried to remove the scroll (probably there is a better way to do this):

.DTFC_LeftBodyLiner{
  overflow-y: hidden !important;
}

http://live.datatables.net/puraqodo/1/edit

But there the border between the first and the second column is gone... it seems that the first column is wither than the cell where it is contained:

[mkhairi]

@Ana06, 😉 here alternative example using ellipsis and word-wrap
http://live.datatables.net/sanabewe/5/

[Ana06]

@mkhairi

@Ana06, here alternative example using ellipsis and word-wrap
http://live.datatables.net/sanabewe/5/

That works perfectly... until you add a w-100 to the table (which I didn't add originally to simplify as it didn't seem to be related): http://live.datatables.net/sanabewe/7/edit 😭

[mkhairi]

@Ana06 why did you add class w-100? is that necessary?

[Ana06]

@mkhairi

@Ana06 why did you add class w-100? is that necessary?

To ensure that the table takes all the space.

If the table is big enough, it looks fine without it:

But if it is smaller

with w-100

without:

it looks weird... 😞

[mkhairi]

@Ana06 owh, i see... try use style="min-width: 100%" instead of .w-100

[Ana06]

@mkhairi that works! 🎉 I am still not completely convinced with having to set the column width, but it is good enough 😉 The bug should still be fix in DataTables though 😄

Thanks for the help! 💘 I have added you as co-author as it is more your code than mine (hope that it is fine): openSUSE/open-build-service@15415b1

[Ana06]

@mkhairi, just in case it is useful to fix the bug, we needed to add word-break: break-all; as well:
openSUSE/open-build-service@383e65c 😉