resizing to fit in a container

[DaveC426913Member]

Having a heckuva time getting a grid to fit in a given space’s height so that its body scrolls. Currently it flows outside the container and is hidden. i.e. if the container is 300 px high (or 200, or 500), the grid is always 400px high, flowing out of its container. Despite flowing out if its container, it still has a scroll bar.

(In my app, the container may start off one size, but it changes as the browser changes size. Which means the grid will have to as well. Not the whole grid – just the data rows, so the header stays visible even while scrolling through the data. Thus, I resize the container in JavaScript using a window.resize event. Then, if necessary, I’ll do the same thing for this grid’s data. Unless it will do it automagically.)

So as not to post a giant block of code here, I posted it in jsFiddle. It won’t work of course, because it’s not loading jqGrid. I’ve simply posted the HTML that the widget has injected into my container.

See screen shot:

[DaveC426913Member]

Ah! I see now. The height property itself can be manipulated on-the-fly.

So, whenever I need to set (or reset) the table in its container, I can do this:

function maximize_content() {

var navSearchHeight = $(‘#navigate form’).outerHeight(true)// get
var navFooterTop = $(‘#navigate .p-foot’).position().top;// get
$(‘#navigate .section.results’).height(navFooterTop – navSearchHeight);
}

where #navigate form is the element immediately above the grid and #navigate .p-foot is the element immediately below it.

[Peter StoevKeymaster]

Hi Dave,

If you want the Grid to fit to its container’s size, set its width and height to ‘100%’. This is supported and there are also samples like the Grid’s mobile demo where the Grid fits to its container’s size. The sample’s code is available in the download package.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DaveC426913Member]

Thanks but setting its height to 100% causes it to flow right outside its container and off the page.

[Peter StoevKeymaster]

Hi Dave,

Setting it to 100% is the same as setting a DIV tag to 100%. I don’t know what exactly happens on your side, but if you send us a sample which we can test, we will debug your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts