# I have 3 inline list

**URL:** <https://community.glideapps.com/t/i-have-3-inline-list/31825>\
**Category:** Ask for Help\
**Created:** [September 15, 2021, 6:29pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825 "2021-09-15T18:29:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 15, 2021, 6:29pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/1 "2021-09-15T18:29:53Z")

</div>

Have 3 inline list

1. display offers in images which is horizontal scroll
2. display categories which is a tiles list  
3 .displays shops which are trending

I have a question for third.I need this list to be vertical scroll that is the 3 rd inline list only should scroll .how this can be achieved.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 15, 2021, 6:31pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/2 "2021-09-15T18:31:27Z")

</div>

Meaning you want the first two inline lists to be “sticky”? So as you scroll the third list, the first two lists are still on the screen?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 15, 2021, 6:37pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/3 "2021-09-15T18:37:11Z")

</div>

use CSS to fix position for first 2 lists… add a separator to position 3rd list below these 2

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 15, 2021, 6:43pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/4 "2021-09-15T18:43:36Z")

</div>

How? seriously don’t know how to create.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 15, 2021, 6:44pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/5 "2021-09-15T18:44:02Z")

</div>

Yes.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 15, 2021, 6:45pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/6 "2021-09-15T18:45:11Z")

</div>

> **[Code BOOK](https://code-book.glideapp.io/)**
>
> share cool codes, scripts and links

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [September 15, 2021, 7:03pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/7 "2021-09-15T19:03:59Z")

</div>

Yes, you’ll need to use some custom CSS to make this work. It’s not a native feature in Glide.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 15, 2021, 7:06pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/8 "2021-09-15T19:06:47Z")

</div>

Any idea?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [September 15, 2021, 7:28pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/9 "2021-09-15T19:28:52Z")

</div>

add a rich text component…  
copy this code and paste to that rich text component…

```auto
<pre><span><style> 
div[id*='screenScrollView'] >div>:nth-child(1) {position: fixed;top: 5% ;left: 1%;
}
div[id*='screenScrollView'] >div>:nth-child(2) {position: fixed;top: 25% ;left: 1%;
}

```

count your inline list components positions in Glide editor and replace child (number)  
adjust % values to place them in desired positions…  
add separators to bring down the 3rd component… or just create another code for child(3) position…  
than create another child to bring down this CSS if it covers tiles and you cant click them… 😉

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 18, 2021, 6:31pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/10 "2021-09-18T18:31:13Z")

</div>

Any examples? please

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 19, 2021, 1:27am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/11 "2021-09-19T01:27:43Z")

</div>

@ThinhDinh I need a video for this.how can I Implement a scroll for all 3 inline list.can I Implement for all types of list like simple list,tiles list and horizontal scrolling list?

I mean if I sets the 3rd inline list to be a scrolling one.

---

<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:** [September 19, 2021, 1:39am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/12 "2021-09-19T01:39:30Z")

</div>

So 1st one is a horizontal scroll, 2nd one is a tiles list with a limited number of items, 3rd one is also a horizontal scroll, or not?

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 19, 2021, 1:45am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/13 "2021-09-19T01:45:04Z")

</div>

Vertical scroll -3rd one  
Need to scroll that particular list only.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 19, 2021, 4:16pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/14 "2021-09-19T16:16:54Z")

</div>

Any video for this.how to do it in css

---

<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:** [September 19, 2021, 11:22pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/15 "2021-09-19T23:22:01Z")

</div>

Sorry, I haven’t had time to look deeper into this. In my experience with Glide, the only thing that sticks when being scrolled is either a horizontal list or a webview with scrolling on. I haven’t come across a way to make a vertical list work like that.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 20, 2021, 5:43am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/16 "2021-09-20T05:43:49Z")

</div>

Yes,I want the 3 rd inline list to be stick and vertically scrollable

 ![IMG_20210920_114601](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ffa355fecb7151030c1282a9655e6990701f3d1e.jpeg)  
I want only “popular” to be scrollable, above all are fixed.

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 20, 2021, 6:20am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/17 "2021-09-20T06:20:45Z")

</div>

![IMG_20210920_114601](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/f/ffa355fecb7151030c1282a9655e6990701f3d1e.jpeg)  
I need like this.only popular things scrollable others should be there

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [September 20, 2021, 9:01am UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/18 "2021-09-20T09:01:20Z")

</div>

Try this:

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

[data-test="app-vertical-list"] {
height: 350px;
overflow-y: scroll;
}

[data-test="app-vertical-list"]::-webkit-scrollbar {
  display: none;
}

```

Note:

- you can change the height from 350px to what you need
- this CSS affect all of your vertical inline lists in the Detail Screen

Let me know…  
bye

---

<div class="post-metadata">

**Author:** ![Manikandan\_R](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manikandan_r/32/43482_2.png) [@Manikandan\_R](https://community.glideapps.com/u/Manikandan_R)\
**Post date:** [September 23, 2021, 12:18pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/19 "2021-09-23T12:18:23Z")

</div>

Perfectly worked.but the tiles list above gets stucked if I scroll.

1.tiles inlinelist  
2.horizontal inlinelist  
3.list inlinelist

3rd list working perfectly what I need  
2nd list working no pbm created  
1 st list sticking at the top if scroll above

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [September 23, 2021, 12:58pm UTC](https://community.glideapps.com/t/i-have-3-inline-list/31825/20 "2021-09-23T12:58:49Z")

</div>

As I wrote, this CSS is applied to all vertical list (all list with vertical orientation), this is why list 1 and list 3 are affected by the same CSS.  
Unfortunately there is no reliable way (in my opinion) to select only the second vertical list.  
Sorry I can’t help you better than this, maybe @ThinhDinh or @Lucas_Pires can add more know-how.

[Next page](https://community.glideapps.com/t/i-have-3-inline-list/31825.md?page=2)