Right now it's looking like I'm going to have to just use JS and avoid CSS position: sticky completely, which is really sad. These two properties work in a similar fashion as the overflow property and accept the same values. My solution has been to not use border-radius or overflow-hidden and instead use a clip-path: inset(0 0 0 0 round px) on the panel, but that comes with a new issue in my case (a bug with Chrome that seems to only occur when I'm using clip-path on huge areas such as panels that comprise most of the page) so clip-path is not an option either. Actually overflow-x will act as auto in your example. The example below shows a table too wide for the containing element with x-scrolling enabled. But that then prevents me from using position: sticky on any elements inside the panel. The reason the cyan box appears only when overflow-x and overflow-y are visible, and disappears otherwise, is simply because the cyan box is overflowing the cell box. Right now, the easiest way to give a panel/element rounded corners is to do border-radius: px combined with overflow: hidden to prevent child elements with backgrounds from bleeding over the rounded areas at the corners. Adjust the overflow-y property to affect the overflow of content vertically. In my case the problem is combining rounded corners with sticky group headers inside a panel. overflow-x-visible>.
.
.
You can't have content that is scrollable inside the container in one direction, and visible outside the container in the other direction. There are some combinations of overflow-x and overflow-y that can't be combined, because they simply don't work. CSS Overflow Y: Take Control of CSS Vertical Overflow CSS Margin vs. Actually overflow-x will act as auto in your example. This feature is useful for more than just horizontal scrolling on tables. However, there is a big difference between overflow-x: clip and overflow-x: hidden.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |