I have 3 inline list

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.

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?

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

How? seriously don’t know how to create.

Yes.

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

Any idea?

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

<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… :wink:

2 Likes

Any examples? please

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

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?

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

Any video for this.how to do it in css

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.

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


I want only “popular” to be scrollable, above all are fixed.


I need like this.only popular things scrollable others should be there

1 Like

Try this:

<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

2 Likes