I was debugging this issue in my project since couple of days. It took a hell out of me in this whole debugging process. You will see the bug as standalone so you might not realise that how tough it could get to debug an issue like this in a full fledged live project. But anyways, I came across this bug few days back. Note that, in the project I use materialize-css globally for styling.
What was bug?
For the UI enhancement, the requirement was to make a table component with fixed height and scroll behaviour so that, user do not need to scroll the whole table to reach the "next" button on the page. So, I applied height: 60vh; overflow-y: auto; css to the said table component (Note that it was custom table web-component I was dealing with). But, as it turned out, page layout got disturbed as table rows in non-visible area were still occupying some space on the page and this was causing the page show vertical scroll bar for the absolutely blank space that was visible on the page. You could actually locate the table rows in non-visible area by inspecting the table and see that they were outside the fixed height of 60vh in the mentioned blank space. Use below code snippets to reproduce the bug.
(Codepen: https://codepen.io/Utsav-Tayde/pen/rNXmxEo)
div {
padding: 2rem;
margin: 2rem;
height: 60vh;
overflow-y: auto;
}// Materialize CSS Plugins
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div>
<table>
<thead>
<th></th>
<th>Name</th>
<th>Role</th>
</thead>
<tbody>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<tr>
<td>
<label>
<input type="checkbox" />
<span></span>
</label>
</td>
</tr>
<!-- Repeat the above <tr> element 30-40 times to make table long. -->
</tbody>
</table>
</div>Debugging process
As soon as I spotted this behaviour, First thing I did is doubted my html-css knowledge. I thought may be this is not the right way to fix the height of table. So, I spent quite a time in investigating that aspect. Once I confirmed that what I’m doing is the right way to fix table height, I started suspecting the web-component and literally refactored and re-written the whole thing. Still, the issue was intact. Till this point of time, I was pretty much pissed off. Nonetheless, I started experimenting in standalone environments. During this process, I noticed that this issue does not occur in another table component that I have in the system. So, I directed my investigation in that way. I started to find the key difference between the two table components. And there it was, I found that the affected table component has checkboxes (input) in each rows. And following the lot of debugging in the said direction, fast forward… I found that Materialize CSS stylesheets apply "position: absolute" rule to checkbox inputs. And the moment I changed it to "position: static" via dev-tools.. my bug was resolved. Huh..! it was peak satisfaction after 4-5 days of debugging.
In the end, I just made changes in my code to apply inline styling to checkboxes so that it will override the Materialize styling and it’s complete. I hope this was helpful.
You need to sign in to view this answers
Leave feedback about this