Overflow auto: Scrollbar styling. (making the scrollbar overlap the content inside the div)

So im building this entry list.

This is going to be connected to a different system at a later date. Where this list will be dynamically updated. New enries will be added and removed by the user.

The problem I’m having is the alignment of the columns when the “overflow Auto”-Scrollbar appears. Like this:

My idea was to make the scroll bar overlapp the content by setting its position to absolute. So I have been doing some experimenting with styling the scrollbar using “::-webkit-scrollbar” on the container and its working fine for changing width, border-radius etc. But when I try to put the position of the scrollbar to absolute nothing happens.

Here’s an image of the custom code im using.


Maybe I’m going about this problem the wrong way. Any iput is greatly appreciated.

Thanks alot!

Here is my site Read-Only: LINK

Nothing will ever happen. They will never be absolute. You have to define a width for them and take that width in account in your headers.

You can take control over the scrollbar a bit more, too (and by using a custom code component inside of the page you’ll see the effects in the Designer).

Yeah I got that, the problem is that the scrollbar is not always going to be there. So if I define a padding in the header with the same size as the scrollbar the columns will be misaligned when the scrollbar is hidden.