Open Ana06 opened 5 years ago
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;
}
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! :wink: 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:
@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
@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:
@Ana06, 😉 here alternative example using ellipsis and word-wrap http://live.datatables.net/sanabewe/5/
@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 :sob:
@Ana06 why did you add class w-100
? is that necessary?
@mkhairi
@Ana06 why did you add class
w-100
? is that necessary?
To ensure that the table takes all the space.
w-100
it looks weird... :disappointed:
@Ana06 owh, i see... try use style="min-width: 100%"
instead of .w-100
@mkhairi that works! :tada: I am still not completely convinced with having to set the column width, but it is good enough :wink: The bug should still be fix in DataTables though :smile:
Thanks for the help! :cupid: I have added you as co-author as it is more your code than mine (hope that it is fine): https://github.com/openSUSE/open-build-service/pull/6948/commits/15415b1c9b7a7ee373d39793b538f4868475b200
@mkhairi, just in case it is useful to fix the bug, we needed to add word-break: break-all;
as well:
https://github.com/openSUSE/open-build-service/pull/6985/commits/383e65c5688f9ba9eb2988fda0822832458da5ef :wink:
Using
table-sm
Boostrap class withfixedColumns
option breaks the table and render an extra arrow.With
table-sm
:Without
table-sm
:HTML code (it is long :see_no_evil:):
Javascript code:
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