# Freezing certain components

**URL:** <https://community.glideapps.com/t/freezing-certain-components/39993>\
**Category:** Ask for Help\
**Created:** [March 23, 2022, 10:41am UTC](https://community.glideapps.com/t/freezing-certain-components/39993 "2022-03-23T10:41:30Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 23, 2022, 10:41am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/1 "2022-03-23T10:41:31Z")

</div>

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.

> **[Meet Google Drive – One place for all your files](https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https:%2F%2Fdrive.google.com%2Ffile%2Fd%2F1hJ0bSECz7g2ltyfGZuyFMAd_ezOz7ZDS%2Fview?usp%3Ddrivesdk&followup=https:%2F%2Fdrive.google.com%2Ffile%2Fd%2F1hJ0bSECz7g2ltyfGZuyFMAd_ezOz7ZDS%2Fview?usp%3Ddrivesdk)**
>
> Google Drive is a free way to keep your files backed up and easy to reach from any phone, tablet, or computer. Start with 15GB of Google storage – free.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 24, 2022, 12:44am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/2 "2022-03-24T00:44:06Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/e/def55f8191f00d8e3479910b221b96c9be4b5e65.png)

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 24, 2022, 7:54am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/3 "2022-03-24T07:54:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Tamara\_Didenko](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/tamara_didenko/32/42215_2.png) [@Tamara\_Didenko](https://community.glideapps.com/u/Tamara_Didenko)\
**Post date:** [March 24, 2022, 1:03pm UTC](https://community.glideapps.com/t/freezing-certain-components/39993/4 "2022-03-24T13:03:57Z")

</div>

@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” 😁😁😁😁

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 12:37am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/5 "2022-03-25T00:37:09Z")

</div>

That’s a great idea! Thank you.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f29b0e69ddd8c48ebaa1e3328923dcfa6fba907e.png)

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

```auto
<pre><span><style>

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

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/b/6bcc2a1a396fddbfbf31d7abf8382d4556da0d1d.png)

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 12:44am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/6 "2022-03-25T00:44:39Z")

</div>

> [@Tamara\_Didenko](#):
>
> I have a similar need but I want button row in my app to “stick to the bottom”

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

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/d/3d22699e528a988af782e9c5b3cc4b477e3e0beb.png)

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.

```auto
<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);
}

```

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 25, 2022, 1:36am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/7 "2022-03-25T01:36:03Z")

</div>

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.🙏

Video link:

> **[VID\_20220325\_082818.mp4](https://drive.google.com/file/d/1ih0W2m7mosTi1von5mlmhnm5XbeIHWna/view?usp=drivesdk)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 1:37am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/8 "2022-03-25T01:37:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 25, 2022, 1:48am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/9 "2022-03-25T01:48:03Z")

</div>

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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/a/5a4e912ac0e4332fc4c4b35245675317267cb670.jpeg)

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 2:09am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/10 "2022-03-25T02:09:14Z")

</div>

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”?

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 25, 2022, 2:22am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/11 "2022-03-25T02:22:03Z")

</div>

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

> **[Screenrecorder-2022-03-25-09-13-58-600.mp4](https://drive.google.com/file/d/1ikIrOmGj2SfJ3P6dM5_-2uwR28m-v-XS/view?usp=drivesdk)**
>
> Google Drive file.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 9:45am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/12 "2022-03-25T09:45:22Z")

</div>

That is indeed possible using the “sticky” method.

```auto
<pre><span><style>

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

```

---

<div class="post-metadata">

**Author:** ![agung\_Taufik](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/agung_taufik/32/2589_2.png) [@agung\_Taufik](https://community.glideapps.com/u/agung_Taufik)\
**Post date:** [March 25, 2022, 10:14am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/13 "2022-03-25T10:14:49Z")

</div>

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

> **[VID\_20220325\_171129.mp4](https://drive.google.com/file/d/1iv_hkBkOZ0YJnWW88yDJoV0XkUytXanB/view?usp=drivesdk)**
>
> Google Drive file.

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

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 25, 2022, 11:43am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/14 "2022-03-25T11:43:18Z")

</div>

> **[CSS Tutorial](https://www.w3schools.com/css/)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

I would start from this.

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [March 26, 2022, 11:43am UTC](https://community.glideapps.com/t/freezing-certain-components/39993/15 "2022-03-26T11:43:36Z")

</div>

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