I have 3 inline list

Ask for Help
1

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.

2

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?

3

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

4

How? seriously don’t know how to create.

5

Yes.

6
7

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

8

Any idea?

9

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
10

Any examples? please

11

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

12

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?

13

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

14

Any video for this.how to do it in css

15

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.

16

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

IMG_20210920_114601
IMG_20210920_114601556Ă—818 68.3 KB

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

17

IMG_20210920_114601
IMG_20210920_114601556Ă—818 68.3 KB

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

1 Like
18

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
19

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

1 Like
20

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.

1 Like