How to set grid height to fit the content

[ralficzek]

There is a place in my app where I do not want to have a scrollbar when too many records is loaded into grid. I do not want to use paging too. I just want my grid to set ist height so I could see all the records.

Is there a easy way to do this, or do I have to count records, get some element height and than resize and repaint??

Please help!!

[cluettr]

Set the height of the grids container div to 100%.

[ralficzek]

I've set it. Does not work.
What am I supposed to put in height when creating grid?

I tried 100% on both div and grid that does not work either.

Any other ideas? :)

I shall post my markup maybe it will help find a solution

Js:

var grid = new Ext.grid.Grid('users-grid-ct', {
ds: gridData,
cm: gridColumns,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
enableColLock:false,
loadMask: true,
width:770,
height:300
});

and markup:
[CODE]<div id="users-main">
<div id="users-grid-div" class="x-box-blue">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>

<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" >
<h3 style="margin-bottom:10px;">Użytkownicy:</h3>
<div id="users-grid-ct" style="border:1px solid #99bbe8;overflow: hidden; width: 770px; height: 300px;position:relative;left:0;top:0;"></div>

<br />
<h3 style="margin-bottom:10px;">Wyszukaj użytkownik

[cluettr]

Just to be sure we are clear:

You set the following (marked in green) correct?




<div id="users-grid-ct" style="border:1px solid #99bbe8;overflow: hidden; width: 770px;
height: 100%;position:relative;left:0;top:0;"></div>



I'm not sure what the below does but I would remove it. You shouldn't have to specify the size of your mask. It inherits the height and width of the div containing the grid.


loadMask: true,
width:770,
height:300

ALSO, check the css heights and widths of those divs that surround/contain the grid's div. If you've defined those as having hard heights it will constrain the div within it (your grids div). Im referring to the css behind "users-grid-div" if there is any...

[ralficzek]

I do not know what am I doing wrong :((

I've reduced the markup only to one line:


<div id="users-grid-ct" style="border:1px solid #99bbe8; width: 770px; height: 100%;position:relative;left:0;top:0;"></div>

even get rid of overflow:hidden.

Removed those lines from JS and still I'm getting zip. Maybe you could post some short working example. I always do better wrapping other people solutions with my own code than writing my own from scratch ;)

Big thanks for interest and help BTW.

[cluettr]

Did you check the css heights and widths of those divs that surround/contain the grid's div?