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?