Data-Scrollable"

From Documentation
Line 15: Line 15:
 
</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.
 +
 +
 +
  Since ZK 8.0.1
 +
If you specify <tt>true</tt> on a [http://www.zkoss.org/javadoc/7.0.3/jsdoc/zul/ContainerWidget.html ContainerWidget] or [http://www.zkoss.org/javadoc/7.0.3/jsdoc/zul/mesh/MeshWidget.html MeshWidget], the popup inside the container component will also move by scrolling.
 +
 +
'''Usage example'''
 +
<source lang="xml">
 +
<div xmlns:ca="client/attribute">
 +
<window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
 +
<label value="Left click" popup="pop"/><separator/>
 +
<separator height="20px"/>
 +
<popup id="pop">
 +
popup
 +
</popup>
 +
</window>
 +
</div>
 +
</source>
 +
* Click the label, trigger a popup, and scroll down.
 +
 +
<source lang="xml">
 +
<div xmlns:ca="client/attribute">
 +
<window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
 +
<label value="Right click" context="ctx"/>
 +
<separator height="20px"/>
 +
<popup id="ctx">
 +
popup
 +
</popup>
 +
</window>
 +
</div>
 +
</source>
 +
* Right click the label, trigger a popup, and scroll down.
  
 
= <tt>data-scrollable="false" </tt> =
 
= <tt>data-scrollable="false" </tt> =

Revision as of 09:41, 31 October 2017

data-scrollable="true"

 Since ZK 7.0.1

If you specify true on a ContainerWidget or MeshWidget, 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.


 Since ZK 8.0.1

If you specify true on a ContainerWidget or MeshWidget, the popup inside the container component will also move by scrolling.

Usage example

<div xmlns:ca="client/attribute">
	<window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
		<label value="Left click" popup="pop"/><separator/>
		<separator height="20px"/>
		<popup id="pop">
			popup
		</popup>
	</window>
</div>
  • Click the label, trigger a popup, and scroll down.
<div xmlns:ca="client/attribute">
	<window height="100px" contentStyle="overflow:auto" ca:data-scrollable="true">
		<label value="Right click" context="ctx"/>
		<separator height="20px"/>
		<popup id="ctx">
			popup
		</popup>
	</window>
</div>
  • Right click the label, trigger a popup, 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 : 2017/10/31

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