Data-Scrollable"

From Documentation
Line 3: Line 3:
 
= <tt>data-scrollable="true" </tt> =
 
= <tt>data-scrollable="true" </tt> =
 
   Since ZK 7.0.1
 
   Since ZK 7.0.1
If you specify <tt>true</tt> on a [http://books.zkoss.org/wiki/ZK_Component_Reference/Containers container component], the error message box inside the container will also move by scrolling<ref> For more information, please refer to http://www.zkoss.org/javadoc/7.0.1/jsdoc/zul/ContainerWidget.html</ref>.
+
If you specify <tt>true</tt> on a [http://books.zkoss.org/wiki/ZK_Component_Reference/Containers container component], the error message box, e.g. which is poped up by violating rules in <tt>constraint</tt> attribute, inside the container component will also move by scrolling<ref> For more information, please refer to http://www.zkoss.org/javadoc/7.0.1/jsdoc/zul/ContainerWidget.html</ref>.
  
 
'''Usage example'''
 
'''Usage example'''
Line 14: Line 14:
 
</div>
 
</div>
 
</source>
 
</source>
* Try to trigger an error box of the textbox and scroll down.
+
* Try to trigger an error box of the Textbox and scroll down.
  
 
= <tt>data-scrollable="false" </tt> =
 
= <tt>data-scrollable="false" </tt> =

Revision as of 00:56, 25 June 2015

data-scrollable="true"

 Since ZK 7.0.1

If you specify true on a container component, the error message box, e.g. which is poped up by violating rules in constraint attribute, inside the container component will also move by scrolling[1].

Usage example

<div xmlns:ca="client/attribute">
    <window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
        <textbox constraint="no empty"/>
        <separator height="100px"/>
    </window>
</div>
  • Try to trigger an error box of the Textbox and scroll down.

data-scrollable="false"

When a user swipes on the content of Listbox, Grid, Tree in a tablet device, the friendly scrollbar will appear. To disable the friendly scrollbar, please use the following setting[2].

 ZK EE tablet only
<div xmlns:ca="client/attribute">
    <listbox ca:data-scrollable="false"/>
</div>


Last Update : 2015/06/25

Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.