Thanks to visit codestin.com
Credit goes to github.com

Skip to content

table-sm Bootstrap class breaks fixedColumns #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Ana06 opened this issue Feb 7, 2019 · 11 comments
Open

table-sm Bootstrap class breaks fixedColumns #17

Ana06 opened this issue Feb 7, 2019 · 11 comments

Comments

@Ana06
Copy link

Ana06 commented Feb 7, 2019

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

With table-sm:

image

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
Copy link
Owner

mkhairi commented Feb 8, 2019 •
edited
Loading

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
Copy link
Author

Ana06 commented Feb 8, 2019 

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:

image

@mkhairi
Copy link
Owner

mkhairi commented Feb 8, 2019

@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
Copy link
Author

Ana06 commented Feb 8, 2019

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

image

@mkhairi
Copy link
Owner

mkhairi commented Feb 8, 2019

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

@Ana06 Ana06 mentioned this issue Feb 8, 2019
Closed
@Ana06
Copy link
Author

Ana06 commented Feb 8, 2019

@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
Copy link
Owner

mkhairi commented Feb 8, 2019

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

@Ana06
Copy link
Author

Ana06 commented Feb 8, 2019

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

image

But if it is smaller

with w-100

image

without:

image

it looks weird... 😞

@mkhairi
Copy link
Owner

mkhairi commented Feb 8, 2019 •
edited
Loading

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

@Ana06 Ana06 mentioned this issue Feb 8, 2019
Merged
@Ana06
Copy link
Author

Ana06 commented Feb 8, 2019

@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
Copy link
Author

Ana06 commented Feb 15, 2019

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

@adrianschroeter adrianschroeter mentioned this issue Feb 19, 2019
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@mkhairi @Ana06