Fixed effect with Css

Hi, someone can help me with a fixed position? I have two inline list and i want to fix the first when i scroll from the bottom. What i want to have is to fix the first inline list when the second inline list scroll down.
The flow can be like the video, start to scroll with glide header animation and when the header change the first inline list go fixed like the end of the video.

Boze · Glide - 4 May 2022 - Watch Video

try this:

<pre><span><style>
div[id*='screenScrollView'] > div > :nth-child(1) {
position:fixed !important;
width:100% !important;
}

add a separator under the first list so it will not overlay the second list.

Thanks man!
It works but when the header go up it fails.
I have “Pure (dark)” theme.

You can solve this?

do you need a header? you can turn it off, and let your first inline list be a header

yes, unfortunately i Need the Header for the inline search.

add your own search :wink: Click the link to the code book above, you will see how I did search and inline lists

This is not user friendly. I think to keep the inline list not fixed if there is no solution.
Have you other idea? I would keep the header and fix the first list attached to the bottom-header.

Are you able to activa first the header animation? I can do the animation instantly and fix the list under the “animated” header.

I don’t know what you mean?

If you can delete this animation and start directly with the small header it’s good.

Boze · Glide - 4 May 2022 - Watch Video



what animation? are you talking about top bar resizing?
change the theme, that only happens on CHAT themes.

Yes, i’m talking about header resizing. I can’t change theme. If i change theme All component change color, from pure black to dark blue and it looks really bad. It’s not possible to resize the header immediatly when i open this tab?

you can CSS any color in your App… just inspect the element and add CSS… or search my Code BOOK for tricks…

1 Like

Thanks Jeff, it works but i have the same problem. it doesn’t fix under the header, more space remain between header and sticked component.

Can you show in a screenshot what space are you talking about? I think this is a different matter from the topic of this thread.

1 Like

Hi @Jeff_Hager,
I have the similar problem with the header. It’s shaking/moving/ not sticky when scrolling down-up. How can I make it fixed, sticky, not bouncing when scrolling?
Thanks :pray:

Is the shaking something you are observing in the builder? That is usually something you can ignore or fix by changing the zoom level in the browser. The emulator does some weird scaling sometimes, but the published app won’t have the problem.

In the builder, everything works fine, but when I log in from a browser, the header issue (shaking/bouncing) appears.

A short video showing it in action :point_down:
https://www.canva.com/design/DAFuujeNoZw/2LbozbDz1TotnSOXxMwUaw/watch?utm_content=DAFuujeNoZw&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink

Not sure what would cause that.