Freeze container on a horizontal scroll

[enzocarmo]

Hi guys, I have a row inside a div, and this row is horizontal and inside it has several containers. I wanted one of these containers to be frozen when I scroll horizontally. I tried using sticky, but it’s not the parent element that has the overflow scroll, it’s an element higher up. Does anyone have a solution?

Specifications:

In this image, I wanted to freeze the container under “unidade”, and as you can see, the scroll is not on the line, it is outside, which prevents the sticky

In this image, the “placeholder” container has a width of 100% and an overflow scroll and the “flexbox” has a width of 175% which makes it go beyond the screen to drag horizontally. and as you can see, the element that is selected is the element that I wanted to be frozen

Link editor: Editor | WeWeb

I don’t know if there is a correct way to share the editor’s link, I just copied mine’s link hahaha, if there is, let me know and I’ll do whatever is necessary

[enzocarmo]

@Broberto
@Joyce

Pls, help me. is urgent

[jptrinh]

Hey @enzocarmo

Column freeze — Tella

Maybe it’s a bit late, but came up with a solution to freeze any column to the left, inside the Table component.
I think adding position: sticky and left:0 would have done the trick, but with the auto-generated wrappers, it’s not working. Fortunately, we can still add some custom styling. This worked for me (add the style to an HTML embed to preview it in the editor) :

<style>
#myTable .ww-columns.ww-object-elem > .ww-layout > div:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
}
</style>

You can modify the number in nth-child(1) to modify which column you want to freeze.
Don’t forget to add a background-color to the corresponding cells to hide the overlapped elements.

[enzocarmo]

@jptrinh

Hi jo, thanks for the answer, but I have some questions:

Does this work even if the overflow scroll is not the parent component of the column in the table?

How did you get to this css class to put sticky and left

[jptrinh]

I tried to replicate the your use case by using the Table component — but in short, yes.
To get the right selector, I use the inspect panel

[enzocarmo]

for the headers, which have a div and inside the columns that contain the cells, it worked

but for the collection structure, which is a div, inside a column, which inside contains a column (contains the cells) and another div, it didn’t work

I created this structure in the collection because I have a function that expands the row and this container that is together with the columns appears

[enzocarmo]

<style>
.ww-columns__dropzone > div:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 1;
}

.ww-columns.ww-object-elem.teste1 > .ww-columns__dropzone > div:nth-child(2) {
    background-color: red;
    position: sticky;
    left: 0;
    z-index: 1;
}

</style>

This is in red and what I wanted to follow with me, I managed to find his class but the sticky doesn’t work

[enzocarmo]

As you can see, those css specifications for sticky and left are taking the column that I want to go to the side, but it won’t

My html

<style>
.ww-columns.ww-object-elem > .ww-layout > div:nth-child(2) {
    position: sticky;
    left: 0;
    z-index: 1;
}
</style>

[jptrinh]

What’s the behavior when you scroll to the left? Are they just staying at there place?

[fredo22]

How can I accomplish freezing the first column in the new data grid so that it will remain visible when scrolling horizontally?

[lorenzo.barbaglia]

@jptrinh i’ve seen you managed to solve the issue in this topic, but if i follow your solution i’m not able to do this.
I’ll share with you my situation hoping you could help.
In the image i show my situation of nested div if can help here’s my div ‘identifier’ “data-v-2026b9e8”.
And this below is the code inside my HTML block.

<style>
table.table_body.item-.column > .ww-layout > div:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: red
}
</style>

i hope you can help me!
Thanks

[jptrinh]

Hey @lorenzo.barbaglia

I tried to reimplement it and it’s still working. I had to add some !important tag to some properties because they got overwrote.

<style>
.table-header > div:nth-child(1), .table-body > div:nth-child(1) {
    background-color: red !important;
    position: sticky;
    left: 0;
    z-index: 1 !important;
}
</style>

Make sure you are targetting the correct elemnents, you can double check by inspecting the elements that are supposed to have the properties applied. And you should see something like this:

I hope this can unlock you!

[lorenzo.barbaglia]

Hi @jptrinh

I’ve tried to implement the thing as you suggested, but is not working. When i inspect the html i see the ‘html’ element added to have the style as specified but is not giving the style to the interested column.
Moreover i’ve tried to hardcode the same style directly in the css and then in the html inspector and still the column doesn’t have the expected behaviour.
I’m not sure on how to make this thing happen, could you send a loom in which you try to explain in details the solution?
Anyway thank you so much for your time!