Freezing certain components

Ask for Help
1

Hi
Is it possible to freeze certain components while scrolling the page?
In this case I want to freeze the CHOICE component, so that it is always on top.

Here’s a screen video.

2

1st, your Google Drive link seems to not be shared for public view.

2nd, I don’t think your idea would be easy with Glide. You can stick it to the top, but I don’t know of an easy way to stop it from being scrolled over.

image
image1297×740 91.9 KB

3

hi @ThinhDinh
thanks for the response.
I hope this feature will be in the future

4

@ThinhDinh ,

I haven’t dug into CSS in Glide, but I’m wondering if you can do these two things to mitigate that:

  • Make the ‘div’ that contains choice element have white background
  • Force that choice element to be on top (can’t remember the css property off the top of my head, but there’s something about z-axis and elements position on it). I’ve done it with Webflow and guessing css should work somewhat similar?

I have a similar need but I want button row in my app to “stick to the bottom” :grin::grin::grin::grin:

5

That’s a great idea! Thank you.

image
image1608×893 80.5 KB

@agung_Taufik I used this code to target the very first component on the screen.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(1) >div {
position: fixed;
top: 90px;
background: white;
z-index: 3;
}

image
image1229×904 62.5 KB

You might have to change the width for tablet mode, though.

2 Likes
6

I did this a while ago, but with a text entry and a floating button to imitate a chat screen.

image
image411×858 72.6 KB

I did have 3 versions of this CSS to test on mobile, desktop and tablet, if you want to have a go with this, here’s the mobile version.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(2) {
position: fixed;
bottom: 0;
background: white;
box-shadow: 0px 0px 19px 5px rgba(199,197,199,1);
height: 100px;
width: 100%;
z-index: 3;
}

div[id*='screenScrollView'] > div > :nth-of-type(2) .input-wrap {
position: fixed;
width: 75%;
z-index: 2;
bottom: calc(var(--safe-area-inset-bottom) + 25px);
backdrop-filter: blur(8px);
}

[id="tabBar"] {
display: none;
}

div[id*='OverlayscreenScrollView'] > div > :nth-of-type(1) {
position:fixed;
z-index: 2;
width:50px;
height:50px;
bottom: calc(var(--safe-area-inset-bottom) + 25px);
right: 5%;
backdrop-filter: blur(8px);
}

[data-test="app-text-field"] + caption {
position: fixed;
z-index: 2;
bottom: calc(var(--safe-area-inset-bottom) + 5px);
backdrop-filter: blur(8px);
}
4 Likes
7

when I put the CHOICE component in first it works, but I have a display for the CHOICE component I put it in fourth position ,And this hasn’t worked…
Is there any other way @ThinhDinh ?
Sorry I always bother you.:pray:

Video link:

8

You can change :nth-of-type(1) to :nth-of-type(4)

9

I already did, but the CHOICE component is missing,

Just for info, I also put CSS so that the choice component is horizontal, does that have any effect @ThinhDinh ?

image
image1909×901 187 KB

10

I’m inclined to believe the choice component is hidden behind the other components at the top.

Is there a reason why you don’t want to move that choice to the top? How do you expect the image and the inline list to appear if you want the choice to “stick”?

11

The reason I was inspired by a similar marketplace application.
in appearance it is very beautiful.

12

That is indeed possible using the “sticky” method.

<pre><span><style>

div[id*='screenScrollView'] > div > :nth-of-type(4) {
position: -webkit-sticky;
position: sticky;
top: 0;
background: white;
z-index: 3;
}
7 Likes
13

finally it worked @ThinhDinh
Thank you very much for your help, I really appreciate it.

I really want to learn css to be like you, is there a fast learning way for css @ThinhDinh ?

1 Like
14

I would start from this.

1 Like
15

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.