Data-Scrollable"

From Documentation
m (correct highlight (via JWB))
 
(3 intermediate revisions by the same user not shown)
Line 3: Line 3:
  
 
----
 
----
= <tt>data-scrollable="true" </tt> =
+
= <code>data-scrollable="true" </code> =
 
{{versionSince| 7.0.1}}
 
{{versionSince| 7.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 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>.
+
If you specify the attribute with <code>true</code> 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] including <code><window>, <groupbox>, <panelchildren>, <tabpanel>, <grid>, <listbox>, <tree></code>, the '''error message box''' (poped up by violating rules in <code>constraint</code> attribute), combobox popup, datebox popup, 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>. Those popups will disappear when you scroll them out of the visible area.
 +
 
 +
[[File:errobox-scrollable.gif | center]]
  
 
'''Usage example'''
 
'''Usage example'''
Line 22: Line 24:
 
{{versionSince| 8.5.0}}
 
{{versionSince| 8.5.0}}
  
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.
+
If you specify <code>true</code> 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'''
 
'''Usage example'''
Line 51: Line 53:
 
* Right click the label, trigger a popup, and scroll down.
 
* Right click the label, trigger a popup, and scroll down.
  
= <tt>data-scrollable="false" </tt> =
+
= <code>data-scrollable="false" </code> =
  
 
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<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Listbox#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Listbox]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Grid#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Grid]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Tree#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Tree]].</ref>.
 
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<ref>For more information, please refer to [[ZK Component Reference/Tablet Devices/UI Enhancements/Listbox#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Listbox]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Grid#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Grid]], [[ZK Component Reference/Tablet Devices/UI Enhancements/Tree#Friendly_Scrolling_Support|ZK Component Reference Tablet Devices: Tree]].</ref>.

Latest revision as of 13:27, 19 January 2022



data-scrollable="true"

Since 7.0.1

If you specify the attribute with true on a ContainerWidget or MeshWidget including <window>, <groupbox>, <panelchildren>, <tabpanel>, <grid>, <listbox>, <tree>, the error message box (poped up by violating rules in constraint attribute), combobox popup, datebox popup, inside the container component will also move by scrolling[1]. Those popups will disappear when you scroll them out of the visible area.

Errobox-scrollable.gif

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 8.5.0

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].

  • Available for ZK:
  • http://www.zkoss.org/product/zkhttp://www.zkoss.org/whyzk/zkeeVersion ee.png
tablet only
<div xmlns:ca="client/attribute">
    <listbox ca:data-scrollable="false"/>
</div>


Last Update : 2022/01/19

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