table-sm Bootstrap class breaks fixedColumns #17

Ana06 · 2019-02-07T16:41:39Z

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

The text was updated successfully, but these errors were encountered:

mkhairi · 2019-02-08T00:33:10Z

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 · 2019-02-08T09:49:45Z

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 · 2019-02-08T10:15:09Z

@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 · 2019-02-08T12:52:36Z

@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 · 2019-02-08T13:07:00Z

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

Ana06 · 2019-02-08T13:47:16Z

@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 · 2019-02-08T14:16:51Z

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

Ana06 · 2019-02-08T14:30:22Z

@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 · 2019-02-08T14:54:05Z

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

Ana06 · 2019-02-08T16:21:12Z

@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 · 2019-02-15T08:06:54Z

@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 😉

Ana06 mentioned this issue Feb 8, 2019

Fix DataTable problems in monitor page openSUSE/open-build-service#6943

Closed

Ana06 mentioned this issue Feb 8, 2019

Fix DataTable problems in monitor page openSUSE/open-build-service#6948

Merged

adrianschroeter mentioned this issue Feb 19, 2019

Improve monitor section in the last blog post openSUSE/obs-landing#217

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

table-sm Bootstrap class breaks fixedColumns #17

table-sm Bootstrap class breaks fixedColumns #17

Ana06 commented Feb 7, 2019

mkhairi commented Feb 8, 2019 •

edited

Loading

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019 •

edited

Loading

Ana06 commented Feb 8, 2019

Ana06 commented Feb 15, 2019

table-sm Bootstrap class breaks fixedColumns #17

table-sm Bootstrap class breaks fixedColumns #17

Comments

Ana06 commented Feb 7, 2019

With table-sm:

Without table-sm:

mkhairi commented Feb 8, 2019 • edited Loading

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

mkhairi commented Feb 8, 2019

Ana06 commented Feb 8, 2019

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

But if it is smaller

with w-100

without:

mkhairi commented Feb 8, 2019 • edited Loading

Ana06 commented Feb 8, 2019

Ana06 commented Feb 15, 2019

With `table-sm`:

Without `table-sm`:

mkhairi commented Feb 8, 2019 •

edited

Loading

with `w-100`

mkhairi commented Feb 8, 2019 •

edited

Loading