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

Design help General
1

So im building this entry list.

image
image1038×460 21.9 KB

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:

image
image1004×442 25.9 KB

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.

image

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

Thanks alot!

Here is my site Read-Only: LINK

2

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).

image
image1312×976 112 KB

3

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.