i am using the sticky header with fixed height for the table. when the row is more than 5 it will create auto scroll. when i am checking the check box ,check box available For the first 5 rows is checking properly but if the scroll is scrolled then the checkbox is not checking properly its misleading to uncheck the already check one since its checking the back/behind check box automatically. To sort this issue ,i tried Z-Index but it doesn't support me. please guide me that where i am going wrong.
.table_overflow {
max-height: 225px !important;
overflow: auto;
margin-bottom: 10px;
}
.ui.report_table.table thead tr:first-child > th {
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
}
.p_0{
padding: 0px !important;
}
<div class="ui segment table_overflow p_0">
<table class="ui fixed single line celled report_table table" id="">
<thead>
<tr>
<th style="width:60px;">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</th>
<th>Registered Name</th>
<th>Registered Number</th>
<th>Barcode Ref</th>
<th>Company Indicator</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
<tr>
<td class="collapsing">
<div class="ui fitted checkbox">
<input type="checkbox">
<label></label>
</div>
</td>
<td title="Haja Najubudeen">Haja Najubudeen</td>
<td title="">20190212</td>
<td title="">NcD31565816.03CN</td>
<td title="">CC- Company</td>
</tr>
</tbody>
</table>
</div>
hajanajubudeen88
All 5 comments
I edited your example code to make it visible. Please always create a reproducable jsfiddle for easier investigation
lubber-de
on 4 Apr 2019
@hajanajubudeen88 I have put your code into a jsfiddle, but unfortunately i cannot reproduce your mentioned issue. Whatever checkbox i click, even when scrolled down, it always looks as expected.
https://jsfiddle.net/9f0L2zmb/
Could you please adjust the jsfiddle to reproduce your issue? Thanks 馃檪
lubber-de
on 4 Apr 2019
Thank you for your great support lubber-de the same issue is happens in this also https://jsfiddle.net/9f0L2zmb/ In this same jsfiddle, you can scroll and set the table first row back side of header, and try to check and uncheck the same header. First time it will check and you can't able to uncheck the checked checkbox.
or else i will record my screen and i attached the zip
once again thanks 馃檪
hajanajubudeen88
on 5 Apr 2019
@hajanajubudeen88 Give higher z-index value:
.ui.report_table.table thead tr:first-child > th {
position: sticky !important;
top: 0 !important;
z-index: 22222 !important;
}
That works for me. Here is the fiddle (https://jsfiddle.net/7q423ps5/) base on your CSS.
ko2in
on 5 Apr 2019
@hajanajubudeen88
馃憤 Ok, confirmed the behavior and also confirmed the fix by @ko2in
But as this is not a feature of FUI, we are not going to change something in the framework _yet_. But your code is a nice example of sticky header scrolling tables...i smell a new feature in FUI here...someday...
lubber-de
on 5 Apr 2019
Related issues
Puspendert
路
3Comments
hammy2899
路
5Comments
dutrieux
路
3Comments
GammaGames
路
4Comments
davekc
路
4Comments
Most helpful comment
@hajanajubudeen88
馃憤 Ok, confirmed the behavior and also confirmed the fix by @ko2in
But as this is not a feature of FUI, we are not going to change something in the framework _yet_. But your code is a nice example of sticky header scrolling tables...i smell a new feature in FUI here...someday...