I want to create grid with minimal width whitch depends on it's data. The grid height has to be defined. And I don't want any horizontal scroll bar. When there are a lot of data the vertical scroll bar is appeared. It is OK. But after that horizontal scroll bar is appeared too. How I can avoid this horizontal scroll bar ?
It is my code:
Tags
People
Badges
Help
<grid height="150px" hflex="min">
<columns>
<column label="one" />
<column label="two"/>
</columns>
<rows>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
</rows>
</grid>
If you don't use the native scrollbar your issue is fixed and your data is still all readable :
<grid height="150px" hflex="min">
<custom-attributes org.zkoss.zul.nativebar="false"/>
<columns>
<column label="one"/>
<column label="two"/>
</columns>
<rows>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
<row>
<label value="Some data"/>
<label value="Some data"/>
</row>
</rows>
</grid>
Greetz chill.
It's in the docs of grid and listbox, but there they only say how to put it in zk.xml. You can use the custom attributes to activate it just for 1 grid also.
chillworld ( 2016-04-20 13:23:13 +0800 )editHello,
place your grid inside a
<div style="overflow-x: hidden">
// your grid here
</div>
Is that what you are looking for?
Giovanni
Asked: 2016-04-19 11:45:50 +0800
Seen: 83 times
Last updated: Apr 20 '16
Hello Giovanni
Horizontal scroll bar is appeared in the <grid>. That's why <div> doesn't solve this issue.
AndriySV ( 2016-04-19 15:48:37 +0800 )edit