Struggling with grid height

[jlarueParticipant]

hello. I’ve been struggling with getting the height of the grid right for users with a variety of different screen sizes. Ultimately, what I’m trying to do is have the grid height resize to the viewport height with its own horizontal and vertical scroll bards on the bottom and right sides, respectively, without the browser’s scroll bar appearing due to overflow.

The grids I’m displaying are generally the whole page, so I’d like to use as much real estate as possible with out causing extra scrollbar intereference.

Right now, this is how I setup the sizing of my grids (autorowheight and autoheight are included here and set to false, just to be explicit)

width: ‘100%’,
height: ‘600’,
autorowheight:false,
autoheight: false

the 600 height is my attempt at finding a happy medium. Is the solution here to create some kind of container that is sized the way I need it to be, and then set the height of the grid to 100%?

[Peter StoevKeymaster]

Hi jlarue,

Please, look at this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/autosize.htm?light. The Grid height in it is set to “100%”. In order a DIV tag to fit to its container’s height, the container’s height must be set. In this case this is the document’s body tag which height defaults to ‘auto’. When we set the document body’s tag to a value different than ‘auto’, then setting Grid’s height to ‘100%’ fills the body.

Regards,
Peter

[jlarueParticipant]

Thanks Peter. The example there wasn’t quite what I was looking for, but it pointed me in the right direction.

[Author]

Posts