1

ZK grid scroll bar problems

asked 2016-04-19 11:45:50 +0800

AndriySV gravatar image AndriySV
13 2

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:

      <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>
delete flag offensive retag edit

Comments

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

2 Answers

Sort by ยป oldest newest most voted
1

answered 2016-04-20 13:18:52 +0800

chillworld gravatar image chillworld flag of Belgium
5322 4 9
https://github.com/chillw...

updated 2016-04-20 13:21:55 +0800

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.

link publish delete flag offensive edit

Comments

whoa never saw this Chill... very nice! Where did you find this? Is there any docs?

gganassin ( 2016-04-20 13:21:44 +0800 )edit
1

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 )edit

Thank you ! It works fine !

AndriySV ( 2016-04-20 13:42:50 +0800 )edit
0

answered 2016-04-19 13:22:28 +0800

gganassin gravatar image gganassin flag of Luxembourg
540 6
http://www.hybris.com/

Hello,

place your grid inside a

with the overflow-x style set to hidden:

<div style="overflow-x: hidden">
        // your grid here
</div>

Is that what you are looking for?

Giovanni

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2016-04-19 11:45:50 +0800

Seen: 43 times

Last updated: Apr 20 '16

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More