Hi Team,
I have a Table and web blocks inside ScrollableArea widget. I can freeze the columns in the table if table outside of the ScrollableArea widget, but I cannot freeze the columns if the Table exist inside the ScrollableArea widget. Can Someone Please help me out on freezing some of the columns in the table even table exist in the ScrollableArea widget.
Thanks,
Shanmuka Reddy
Hi @Shanmuka Reddy,
Please use below CSS to Freeze column in table.
I am also attaching OML for your reference you can check in that also. If any concern feel free to ask:
Hope this will helps you!!
Regards,
Rajat
Hi Rajat,
Thanks for sharing sample oml here, Freezing columns is working fine till scrolling table completes. As i mentioned in the Scrollable area contains Tables and Web Blocks, Once scrolling table completes the next scrolling web block is overlapping the freezing columns. My requirement is I need freeze the table columns for entire scrollable area. I have add the oml here.
Hi @Shanmuka Reddy ,
I have updated your OML please check.
This you want right?
Changed some css:
The below blocks also should be inside the scrollable area only like below
Check now like this :
Updated OML just remove last css we added in the page.
As you shared the screenshot that looks also not freezing the columns once table completes the scrolled then when block try to scroll left the freezed columns also scrolled left. I just need even when you scroll blocks also freezed columns should be freeze and rest of the blocks can be scroll.
No @Shanmuka Reddy ,
You have scroll area widget which having default scroll for overall container.
Outer scroll is for whole area scroll and in the bottom of table it is fixed column scroll.
Outer Scroll is not required because I have lot of columns from web blocks as well which relates to table. That's I just need in single scroll I need freeze the columns. The outer scroll will scroll the entire container.
If we freeze the column but it will relate to width also because we need some with for that.
Check below OML single scroll but we need table fixed width on that.
Both width having its own scroll.
We have some forge components also to freeze table records you can refer that also.
Is your issue resolved or not?
Freezing till table is fine and we can freeze the columns in scrollable area, but freezing the blocks are not working.
shanmuka reddy
@Shanmuka Reddy ,
not sure what user will like your design, it is these day not a very natural / expected thing to have to scroll horizontally to see information / hidden parts. And the experience would probably be horrible on smaller devices.
But I had users in the past who needed to scroll a lot of columns and also have fixed columns, and one possible (dirty) option is to fix the height of all rows, and have 2 tables next to each other. Table1 with the fixed columns is before the scrollable area, Table2 with the rest of the columns is first element in the scrollable area. You'll probably need to mess with css to make it look like one single table, if that is required.
Dorine