Horizontal scrollbar at jqxgrid 100% width

[trandmaParticipant]

Hello.

I am having trouble with getting the grid with 100% width to work correctly so that column resizing is supported but there is no horizontal scrollbar.

– When the table is set to 100% width and all columns are also defined with % widths, everything is displayed correctly initially but resizing obviously creates a scrollbar.
– If I set the table to a fixed width of X pixels, the columns with % values and the last column to ‘auto’ width, everything including resizing works acorrectly but the table is not with a flexible width.
– When I set the table to 100% width, columns with % values and the last column to ‘auto’ width, the last column is probably not sized correctly as the grid displays a horizontal scrollbar at all times, even though the table correctly resizes on container size changes and column resizing is also done almost properly.

I have created this Example to demonstrate the problem.

Could you please advise on how to achieve flexible widths but also have the last column auto size so that there would be no scrollbar.

Thank you

[HristoParticipant]

Hello trandma,

You could set two columns without width. In this way, it will be calculated automatically.
Please, take a look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[trandmaParticipant]

Thank you for the update. What you propose seems to work only at some container widths. When the output window is resized in your example, the scrollbar still appears at some pixel widths and the scrollbar’s appearance seems quite regular. Perhaps a rounding error or miscalculation somewhere?

Is this a known issue or do you consider it working as intended?

Regards.

[trandmaParticipant]

Perhaps there is some internal method that I could call to have the scrollbar component recalculate all its bounds? Any further ideas on how to get the scrollbar to behave would be very welcome.

Thank you.

[HristoParticipant]

Hello trandma,

It looks as it happens from the environment.
Please, take a look at this demo:
https://www.jqwidgets.com/angular/angular-grid/angular-grid-fluidsize.htm?light
There is no horizontal scrollbar, it seems to work fine.

I would like to suggest you try to change the width of one column dynamically when there is such horizontal bar – this.myGrid.setcolumnproperty('firstname', 'width', '21%');
You could bind to window resize or this layout and to check for class name “jqx-scrollbar-thumb-state-normal-horizontal”.
If the ‘visibility’ is ‘hidden’ then set a new width for one of the columns.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts