Grid Height 100% not working with Bootstrap (AngularJS)

[kalel16Participant]

The grid fluid sample doesn’t work when the grid (using angularjs) is placed in bootstrap grid system. setting grids height to 100% has no effect. set html, body width and height to 100%….no effect….the grid fluid size works when bootstrap grid system is not used. This seems to be a bug.

<div class=”container-fluid”>
<div class=”row”>
<div class=”col-xs-12″>
<!– jqx grid directive goes here –>
</div>
</div>
</div>

[Peter StoevKeymaster]

Hi kalel16,

Here is a lesson about how DIV tags on the Web work. If you put a DIV tag inside another DIV tag, and set the height of the inner DIV tag in percentages, this means that the DIV’s height is percentage of the parent DIV tag’s height. Your parent DIV tag height by default has height = “auto” as any DIV tag on the web by the way. So you end up with 100% height of something which does not have height. Your solution is to set the height of the Parent DIV tag and if necessary up to the hierarchy.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts