Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
 | 1 | initial version | |
I am creating a ZK web app that contains a grid with paging modality. For some reason some of the lower rows of each page are not visible on the computer screen, as the area of the screen is too small. I have tried several solutions to solve this issue (vertical separator, lower percentage in the height) but the problem persists. Has anyone had the same problem in the past? If so, how did you manage to solve it?
<?xml version="1.0" encoding="UTF-8"?>
<?link rel="stylesheet" type="text/css" href="/zul/styles.css.dsp"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk xmlns="zul link here"
xmlns:xsi="XMLSchema-instance"
xsi:schemaLocation="zul.xsd here">
<window id="mainwin2" height="30%" width="100%" visible="false" style="overflow: auto">
</window>
<window id="mainwin" apply="${crashAssistanceWorkstationMain}" height="99%" width="100%" visible="false" style="overflow: auto">
<panel width="100%" height="185px">
<panelchildren style="width: 100%;">
<vbox style="width: 100%;">
<separator spacing="2px"/>
<div style="width:1115px; margin: 0 auto;">
<image style="background:url('../images/header1-itb.png');" src="../images/header2-itb.png" />
</div>
<separator spacing="3px"/>
<borderlayout width="100%" height="30px">
<west border="none" width="50%">
<div width="100%" height="100px" align="left">
<toolbarbutton id="btnrefresh" image="/images/refresh.png" tooltiptext="Click to refresh and reload the data."/>
<toolbarbutton id="btnUserAdmin" image="/images/security.png" tooltiptext="Click to administer username security." visible="false"/>
<toolbarbutton id="btnReport" image="/images/reports.png" tooltiptext="Click to run a report." visible="true"/>
</div>
</west>
<east border="none" width="50%">
<div width="100%" height="100px" align="right">
<label value=" " id="whologgedin"/>
<button label="Logout" id="logout"/>
<separator spacing="8px"/>
</div>
</east>
</borderlayout>
<separator spacing="8px"/>
</vbox>
</panelchildren>
</panel>
<tabbox width="100%"> <tabs> <tab label="List" id="alertstab"/> <tab label="Search" id="searchtab"/> <tab label="An Search" id="anomalysearchtab"/> <tab label="An Mgt" id="anomalyescallationtab"/> <tab label="Request" id="trackingtab"/> <tab label="Create An" id="createalerttab"/> </tabs> <tabpanels> <tabpanel width="100%" style="padding: 0;"> <panel border="normal" width="100%" height="100%"> <panelchildren> <vbox> <grid id="grid" vflex="min" width="100%" emptymessage="Nothing in Data List." mold="paging" pagingposition="bottom" autopaging="true" <="" p="">
style="background-color: #d3d3d3; overflow: scroll;">
<auxhead>
<auxheader colspan="12" height="40px">
<hbox pack="center" align="start">
<separator spacing="5px"/>
<label value="Filter alerts by: "/>
<combobox id="sortby" visible="true" width="260px" style="padding-bottom:4px" readonly="true">
<comboitem label="Specification" style="padding-bottom:4px"/>
<comboitem label="Duplicates" style="padding-bottom:4px"/>
<comboitem label="BPS in Unknown Status" style="padding-bottom:4px"/>
</combobox>
<button label="Close" id="bulkclose"/>
</hbox>
</auxheader>
</auxhead>
<columns menupopup="auto">
<column width="3%" label=""/>
<column width="3%" label=""/>
<column width="6%" label="ID" style="text-align: center"/>
<column width="11%" label="CREATED DATE" style="text-align: center"/>
<column width="11%" label="EVENT DATE" style="text-align: center"/>
<column width="8%" label="REG" style="text-align: center"/>
<column width="8%" label="Pot Number" style="text-align: center"/>
<column width="12%" label="CUSTOMER" style="text-align: center"/>
<column width="12%" label="TAKEN ON" style="text-align: center"/>
<column width="8%" label="CATEGORY" style="text-align: center"/>
<column width="11%" label="USER" style="text-align: center"/>
<column width="7%" align="center" label=""/>
</columns>
</grid>
</vbox>
</panelchildren>
</panel>
</tabpanel>
</tabpanels>
</tabbox> <timer running="true" id="timer" delay="10000" repeats="true"/> </window> </zk>
| | 2 | No.2 Revision |
I am creating a ZK web app that contains a grid with paging modality. For some reason some of the lower rows of each page are not visible on the computer screen, as the area of the screen is too small. I have tried several solutions to solve this issue (vertical separator, lower percentage in the height) but the problem persists. Has anyone had the same problem in the past? If so, how did you manage to solve it?
<?xml version="1.0" encoding="UTF-8"?>
<?link rel="stylesheet" type="text/css" href="/zul/styles.css.dsp"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk xmlns="zul link here"
xmlns:xsi="XMLSchema-instance"
xsi:schemaLocation="zul.xsd here">
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<window id="mainwin2" height="30%" width="100%" visible="false" style="overflow: auto">
</window>
auto">
</window>
<window id="mainwin" apply="${crashAssistanceWorkstationMain}" height="99%" width="100%" width="100%"
visible="false" style="overflow: auto">
auto">
<panel width="100%" height="185px">
<panelchildren style="width: 100%;">
<vbox style="width: 100%;">
<separator spacing="2px"/>
<div style="width:1115px; margin: 0 auto;">
<image style="background:url('../images/header1-itb.png');" src="../images/header2-itb.png" />
</div>
<separator spacing="3px"/>
<borderlayout width="100%" height="30px">
<west border="none" width="50%">
<div width="100%" height="100px" align="left">
<toolbarbutton id="btnrefresh" image="/images/refresh.png" tooltiptext="Click to refresh and reload the data."/>
<toolbarbutton id="btnUserAdmin" image="/images/security.png" tooltiptext="Click to administer username security." visible="false"/>
<toolbarbutton id="btnReport" image="/images/reports.png" tooltiptext="Click to run a report." visible="true"/>
</div>
</west>
<east border="none" width="50%">
<div width="100%" height="100px" align="right">
<label value=" " id="whologgedin"/>
<button label="Logout" id="logout"/>
<separator spacing="8px"/>
</div>
</east>
</borderlayout>
<separator spacing="8px"/>
</vbox>
</panelchildren>
</panel>
</tabbox> <timer running="true" id="timer" delay="10000" repeats="true"/> </window> </zk>
| | 3 | fixed code, changed description of the problem |
I am creating a ZK web app that contains a grid with paging modality. For autopaging modality set to true. Based on my assumptions, the number of rows displayed in the grid for each page would change according to the size of the browser area. However for some reason some of the lower rows of displayed for each page are not visible on the computer screen, as the area of the screen is too small. browser screen. I have tried several solutions to solve this issue (vertical separator, lower percentage in the height) but the problem persists. Has anyone had the same problem in the past? If so, how did you manage to solve it? I would be extremely grateful if someone can help me. Thanks in advance!
<?xml version="1.0" encoding="UTF-8"?>
<?link rel="stylesheet" type="text/css" href="/zul/styles.css.dsp"?>
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<zk xmlns="zul link here"
xmlns:xsi="XMLSchema-instance"
xsi:schemaLocation="zul.xsd here">
<?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?>
<window id="mainwin2" height="30%" width="100%" visible="false" style="overflow: auto">
</window>
<window id="mainwin" apply="${crashAssistanceWorkstationMain}" height="99%" width="100%"
visible="false" style="overflow: auto">
<panel width="100%" height="185px">
<panelchildren style="width: 100%;">
<vbox style="width: 100%;">
<separator spacing="2px"/>
<div style="width:1115px; margin: 0 auto;">
<image style="background:url('../images/header1-itb.png');" src="../images/header2-itb.png" />
</div>
<separator spacing="3px"/>
<borderlayout width="100%" height="30px">
<west border="none" width="50%">
<div width="100%" height="100px" align="left">
<toolbarbutton id="btnrefresh" image="/images/refresh.png" tooltiptext="Click to refresh and reload the data."/>
<toolbarbutton id="btnUserAdmin" image="/images/security.png" tooltiptext="Click to administer username security." visible="false"/>
<toolbarbutton id="btnReport" image="/images/reports.png" tooltiptext="Click to run a report." visible="true"/>
</div>
</west>
<east border="none" width="50%">
<div width="100%" height="100px" align="right">
<label value=" " id="whologgedin"/>
<button label="Logout" id="logout"/>
<separator spacing="8px"/>
</div>
</east>
</borderlayout>
<separator spacing="8px"/>
</vbox>
</panelchildren>
</panel>
<tabbox width="100%">
<tabs>
<tab label="List" id="alertstab"/>
<tab label="Search" id="searchtab"/>
<tab label="An Search" id="anomalysearchtab"/>
<tab label="An Mgt" id="anomalyescallationtab"/>
<tab label="Request" id="trackingtab"/>
<tab label="Create An" id="createalerttab"/>
</tabs>
<tabpanels>
<tabpanel width="100%" style="padding: 0;">
<panel border="normal" width="100%" height="100%">
<panelchildren>
<vbox>
<grid
id="grid"
vflex="min"
width="100%"
emptyMessage="Nothing in Data List."
mold="paging"
pagingPosition="bottom"
autopaging="true"
style="background-color: #d3d3d3; overflow: scroll;">
<auxhead>
<auxheader colspan="12" height="40px">
<hbox pack="center" align="start">
<separator spacing="5px"/>
<label value="Filter alerts by: "/>
<combobox id="sortby" visible="true" width="260px" style="padding-bottom:4px" readonly="true">
<comboitem label="Specification" style="padding-bottom:4px"/>
<comboitem label="Duplicates" style="padding-bottom:4px"/>
<comboitem label="BPS in Unknown Status" style="padding-bottom:4px"/>
</combobox>
<button label="Close" id="bulkclose"/>
</hbox>
</auxheader>
</auxhead>
<columns menupopup="auto">
<column width="3%" label=""/>
<column width="3%" label=""/>
<column width="6%" label="ID" style="text-align: center"/>
<column width="11%" label="CREATED DATE" style="text-align: center"/>
<column width="11%" label="EVENT DATE" style="text-align: center"/>
<column width="8%" label="REG" style="text-align: center"/>
<column width="8%" label="Pot Number" style="text-align: center"/>
<column width="12%" label="CUSTOMER" style="text-align: center"/>
<column width="12%" label="TAKEN ON" style="text-align: center"/>
<column width="8%" label="CATEGORY" style="text-align: center"/>
<column width="11%" label="USER" style="text-align: center"/>
<column width="7%" align="center" label=""/>
</columns>
</grid>
</vbox>
</panelchildren>
</panel>
</tabpanel>
</tabpanels>
</tabbox> <timer running="true" id="timer" delay="10000" repeats="true"/> </window> </zk>