In Apps, how would one go about making the top 2, 3, or 4 components ‘sticky’
I found this and it works well for the first component but when I try to add another richtext with nth type to ‘2’ (on an action text component) it doesn’t work.
Thanks in advance.
Hi Eric, you could try setting the top and/or z-index values.
I tried to get it to work with no success. How would you suggest I alter this CSS to make all of the top 4 components ‘sticky’ Will I need 4 rich text components? Thanks again
<pre><span><style>
div[id*='screenScrollView'] > div > :nth-of-type(1) {
overflow-x: scroll;
white-space: nowrap;
}
div[id*='screenScrollView'] > div > :nth-of-type(1)::-webkit-scrollbar {
display: none;
}
div[id*='screenScrollView'] > div > :nth-of-type(1) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: transparent;
z-index: 3;
}
Yes, you need to create four rich texts to set each component. Each component requires a different target CSS class and a different top value.
Or if you want the second component to overwrite the first component then you can use the same top value but a different z-index.
Nb: Change the nth-of-type (n) according to the order of your choice of components.
Be careful if you have hidden components or components like float buttons above them, then your nth-of-type could be missed.
