Sticky panel on the right of the page

Anvil Q&A
1

Dear Anvil people, hello !

What I’m trying to do:

I am building an app (using the material 3 template). In one of my forms, i have a column panel with two main columns: the left panel with an approximate width of 70% of its container, and the right panel with the remaining.
This can be sumarized as an shopping item list on the left panel, and my shopping cart on the right panel.
Here is an image of what it looks like :

Screenshot 2024-04-30 170739
Screenshot 2024-04-30 1707391920×1068 99.6 KB

The left panel is everything on the left, which covers approximately 70% of the page width. The right panel (the cart) has the header “PANIER”.

Now, the page itself is scrollable when the content in the left panel overflows.
What i would like is to have the right panel to be sticky, that is, stay where it is vertically even when i scroll down.

What I’ve tried and what’s not working:

Both left and right panels are column panels, contained in the content_panel of the original material design 3 template.

My first try was using position: fixed on the right column panel.
Problem was that its position was completely disociated from the left panel position, hence when i open the left navigation menu, the right panel stays in place and doesn’t shift horizontally to give space for the left panel, which is shifted to the right when left navigation menu is opened.

My second try was with position: sticky and top: 0 for the right panel.
If i understand well, this should give me what i want since it is supposed to let the right panel in the flow of the other elements of its container, hence it would be shifted with the left menu opening, but it should also stick vertically to top: 0 when i scroll down.
This is where it doesn’t work. The right panel is also scrolled and disappears from the page when scrolling.

Code Sample:

Here is my second try, with the sticky approach :

.anvil-role-right-panel{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    border-radius: 15px;
    background-color: %color:Surface%;
    padding: 12px;
    margin: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 5px 8px 0px rgba(0, 0, 0, 0.07);
}

Any idea on how to deal with this ?

2

Hi @m0r0d3v,

Did you figure this out? I am stuck trying to achieve an identical goal.

Jack

1 Like
3

Maybe adding right: 0 to your code will work.

.anvil-role-right-panel{
    position: fixed;
    right: 0;
    top: 0;
    border-radius: 15px;
    background-color: %color:Surface%;
    padding: 12px;
    margin: 10px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12), 0px 5px 8px 0px rgba(0, 0, 0, 0.07);
}```

Otherwise, it would be great if you can reproduce this issue in a clone app.
4

Hi,

Thanks for jumping in.

Adding right: 0; didn’t help me unfortunately.
Here is a basic example of a ‘sticky’ item inside a linear panel which is not behaving as expected:

It would be great if we could figure out a way to place a sticky item within the form itself - avoiding a second scrollable area (linear panel).

1 Like
5

@Raxz thanks for your reply, it is (unfortunately) comforting to see i’m not the only one with that problem.
I haven’t managed to solve this pb at that time, so I had completely reworked my design since it was unsolvable.

@divyeshlakhotia’s answer also didn’t work for me.

But if anybody finds a solution, I’m still interested !