54
Views
6
Comments
how to fix column width
Question
Application Type
Reactive

Hi All,


I want to fix column with in a table. i tried to give  style "overflow-x: scroll;" inside container and i also give the  width in particular header cell but it is not working my table is going outside of the container how can i fix this issue.

 

Champion

Hi @ritu kushwaha 

Can share oml?

Best

Arun

It sounds like you are trying to limit the width of the entire table to the page, and allow scrolling to see the fields that do not fit inside the browser's current view, while not interrupting the overall page layout.

You're on the right path with the overflow setting, however you have set it too low. The max-width and overflow settings should be on the container that surrounds the table, not the header of the table itself.


Best,
RAD Manage

Hello Ritu,

You need to enclose the table in container and set the wideth of container to fill and tables style classes of overflow and width to fill, use this container inside another container, now you will able to see the desired output,

Regards, 

Kom

Hey Ritu,

Please follow the below steps :

1)Enclose the table inside a container.Give the width of the container as "12 col".

2)Give the container css as "overflow-x:scroll;"

3)Make sure the parent of the enclosed container should also have "12 col" as width property.


It will work!!

Thanks & Regards,

Sudip Pal

@ritu kushwaha  You can fix this issue with css, if you share the oml from your personal environment , I can you fix and revert you with a solution.

Hi @ritu kushwaha,

using "overflow-x: scroll;"  to scroll the table to see columns which are not visible is a good idea to follow.

Enclose the table in a container and apply this css to the container then the scroll will be just below the table. Make sure only table is inside the container neither pagination nor any other elements to avoid the spacing.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.