Going crazy with width and height

asked 2008-11-23 23:44:36 +0800

judacoor
280 ● 1 ● 3 ● 8

Hey everyone,

I'm having some trouble adjusting a grid (or any component) within a page, for I can't get it to occupy 100% of the space it has destined.

I have a main page with something like this:

<window id="mainMenu" use="npBO.main.MainMenu" border="normal" width="100%" height="100%">

<caption >
<button label="Show Doc ID" onClick="mainMenu.showText()" />
</caption>

<borderlayout height="100%">
<north id="mainNorth" maxsize="150" flex="true" size="85px">
<div sclass="NorthBanner" align="center" width="100%">
<image height="95%" src="/img/Top.jpg" />
</div>
</north>
<center id="mainCenter" flex="true">
<borderlayout id="centerBL" >
<west id="westBL" title="Menu" size="25%"
splittable="true" collapsible="true">
<div >
<include sclass="menuAreaInc" width="100%" id="menuAreaInc"/>
</div>
</west>
<center id="workArea" title="Zona de trabajo" flex="true" autoscroll="true">
<div >
<include width="90%" sclass="workAreaInc" id="workAreaInc" />
</div>
</center>
</borderlayout>
</center>

<south id="mainSouth" flex="true" size="75px">
some banner too
</south>
</borderlayout>
</window>

So as you can see it's all about the left-borderLayout (westBL) and the center-borderlayout (workArea), and inside those spaces I placed a <div> with and include, which source I update on every click to give the user the feel I want.

One of the pages that loads on the id="workArea" is:

<window id="sugeSearch" width="100%" use="npBO.suge.SugeSearch">
<div width="100%">
<listbox id="sugeGrid2" checkmark="true" width="100%"
multiple="true" mold="paging" onCreate="sugeSearch.fillGrid2()">
<listhead>
<listheader label="Eliminate" />
<listheader label="Type" sort="auto" />
<listheader label="Subject" sort="auto" />
<listheader label="Content" sort="auto" />
</listhead>

</listbox>
</div>
<separator/>
<div >
<grid id="sugeGrid" width="100%" onCreate="sugeSearch.fillGrid()">
<columns>
<column label="Type"/>
<column label="Subject"/>
<column label="Content"/>
<column/>
</columns>
</grid>
</div>
</window>
</zk>


So, the main problem was that I was unable to set the vertical scrollbar to that panel, because when I activated de autoscroll attribute, there would appear a horizontal scrollbar on the bottom (which I did not have the need of); so I removed most of the items width=100% attributes i.e. window, main window, include, etc. And now it's ok, there is only a vertical bar when I need it.

So we're good so far....

...but now I just can't get neither the grid nor the listbox to occuppy the hole <center> area (id=workArea), the listbox just wouldn't fit......if I set it to width=100% it doesn't allocate the space correctly or something and it show a horizontal scrollbar, but if I reduce the value of that width, then the listbox only occupies like 3/4 of the available space in the workArea

What I need is to set it such as in the zkDemo in the paging example under listboxes, where it does fit to 100% of the space designated to place the grid but I can't seem accomplish it.....

...Please help me!

Thanks,
judacoor