Hi,
I’m playing around with CSS and try to make the header / tool bar stay on top of the screen when scrolling down the list. Just in case anyone wants to do the same, this is what I came up with:
html, body, .main_div, .layoutDiv, .layoutDiv > .content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.layoutDiv {
top: 70px;
}
.layoutDiv > .content {
top: 43px;
padding-top: 20px;
overflow-y: auto;
}
@media (max-width: 600px) {
.layoutDiv > .content {
top: 36px;
}
}
If one likes it a little more fancy, one can also add the following which adds shadows (adopted from here):
.layoutDiv > .content {
/* https://lea.verou.me/2012/04/background-attachment-local/ */
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background:
/* Shadow covers */
linear-gradient(white 30%, rgba(255,255,255,0)),
linear-gradient(rgba(255,255,255,0), white 70%) 0 100%,
/* Shadows */
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
background-repeat: no-repeat;
background-color: white;
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, local, scroll, scroll;
}
An example list then looks like this:
Unfortunately, I did not find out how to force the scroll bar to stay on the right border of the screen. Instead, it is now on the right border of the list (as in the example).
All the best,
soremo