Vertical scrollbar causing column width different between header and cell in spreadsheet. This is a common issue when the HTML page that display on a computer. Whereas, it won't have issue if it is on Android or iOS because the scrollbar is floating on top of the content.
To explain this issue, let says we have a spreadsheet (or "table" view) built with DIV which looks like below:
<style>
.header {
display:flex;
flex-direction:row;
}
.item {
display:flex;
flex-direction:row;
}
.c1 {
width:50%;
}
.item-list {
overflow: hidden;
overflow-y: scroll;
height: 80px;
}
</style>
<div class="my-table">
<div class="header">
<div class="c1">Date</div>
<div class="c1">Ref #</div>
</div>
<div class="item-list">
<div class="item">
<div class="c1">1 Sep 2019</div>
<div class="c1">0001</div>
</div>
<div class="item">
<div class="c1">1 Sep 2019</div>
<div class="c1">0002</div>
</div>
<div class="item">
<div class="c1">1 Sep 2019</div>
<div class="c1">0003</div>
</div>
<div class="item">
<div class="c1">1 Sep 2019</div>
<div class="c1">0004</div>
</div>
<div class="item">
<div class="c1">1 Sep 2019</div>
<div class="c1">0005</div>
</div>
</div>
</div>
With the CSS for item-list, a vertical scrollbar will appear once the number of items increased.
The problem with this CSS is that the date and reference number column in the header will have a different width if you compared it with the column in the items.
To solve this, you need to use this style:
(1) you have to use "sticky:
.header{
position: sticky;
top: 0;
left: 0;
background-color: white;
}
(2) Move the overflow attribute for "item-list" to "my-table":
.my-table {
position:relative;
overflow: hidden;
overflow-y: scroll;
height: 80px;
}
And that solves the column width issue when there is a vertical scrollbar.
