Grid with autopaging property set to true doesn't display rows properly

asked 2013-10-22 13:20:43 +0800

Antoc
21 ● 4

updated 2013-10-23 09:20:39 +0800

I am creating a ZK web app that contains a grid with 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 displayed for each page are not visible on the 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>