Grid/Listbox head with scrolling

answered 2008-09-02 12:45:08 +0800

dastultz
797 ● 9

I posted this as issue 2082939
https://sourceforge.net/tracker/?func=detail&atid=785191&aid=2082939&group_id=152762

but Jumper deleted it. I'm posting again here to drum up support for a change. Below is example zul code. The red area highlights the problem. When the scroll bars come alive, the column widths are reduced. I'm thinking the head div needs to stay the full width. All columns could be scaled down except the last one which would continue across the top of the scroll bar. Obviously the columns in the faker row of the body would stay as they are.

Please vote for this change. Thanks.
/Daryl

<window>
<style>
div.listbox, div.tree, div.grid {
background-color: Red;
}
.foot-cell-inner {
background-color: Green;
}
</style>
<grid width="400px" height="200px">
<auxhead>
<auxheader colspan="2">Header</auxheader>
</auxhead>
<columns>
<column label="Column 1" />
<column label="Column 2" />
</columns>
<rows>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
<row>
<label value="Something" />
<label value="Something Else" />
</row>
</rows>
<foot>
<footer span="2">
Footer
</footer>
</foot>
</grid>
<listbox width="400px" height="200px">
<auxhead>
<auxheader colspan="2">Header</auxheader>
</auxhead>
<listhead>
<listheader label="Column 1" />
<listheader label="Column 2" />
</listhead>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listitem>
<listcell>
<label value="Something" />
</listcell>
<listcell>
<label value="Something Else" />
</listcell>
</listitem>
<listfoot>
<listfooter span="2">
Footer
</listfooter>
</listfoot>
</listbox>
</window>