Cannot set height:100% on grid

[GwynParticipant]

I forked this from an existing fiddle and simply changed height / width to 100%

http://jsfiddle.net/gwynge/ya0Lkcsb/

Width works, height doesn’t – keeps setting it to 400px.

How do I resolve this? A very, very obvious need is to make the grid responsive to parent window / div size changes

[Peter StoevKeymaster]

Hi Gwyn,

document.body element by default in web applications is with height set to “auto”. This means that any HTML Element with height set in percentage will not work while you do not set the body element’s height to a meaningful number. The provided Fiddle has 2 issues:

1. body element’s height is not set i.e it is “auto”.

html, body {
  height: 100%;
}

2. In the HTML, the Grid’s DIV tag is inside a DIV tag with ID ‘jqxwidget’. The default height of DIV tags is ‘auto’, too.

The updated fiddle is: http://jsfiddle.net/kcw2z8nf/

[GwynParticipant]

The trouble with this is that by adding that style it is going to affect everything else in the page, possibly negatively.

I anticipate that the widget is a self-contained element that can be slotted into a web page without impacting anything outside of it. In other words within a hosting Div I expect everything to do with the widget sits within that.

That doesn’t seem to be the case.. (and may demonstrate my naivety with HTML/CSS)

So I suppose the other question is *how* to make it so that it simply takes the height of its parent div (which will have a size) *without* impacting anything else on the page

[Peter StoevKeymaster]

Hi Gwyn,

It takes the height of the parent DIV. In the sample you provided, the parent DIV has no height. Ex: http://jsfiddle.net/5j6xcnzo/

Regards,
Peter

[GwynParticipant]

I’ve now set the parent div to be height 100% in my usage and it’s solved the problem (although I have new issues which I now need to get to the bottom of!).

I really like the grid, I just hope that I can get it to work in my application environment

[Author]

Posts