wrong listbox column width initialisation

asked 2020-01-30 01:05:27 +0800

WilliamBakker gravatar image WilliamBakker

Hello, I have a problem with a listbox.

The columns ' width of the listbox are not applied at the init of the page, they are applied a few seconds later, which causes the columns of the table to move. I can't reproduce in ZK Fiddle.

In the viewmodel, there are just data, no action specific to the view. zul code of the popup :

<window id="modalWindow" apply="org.zkoss.bind.BindComposer" width="1000px" mode="modal" position="center,center"
    viewModel="@id('vm') @init(arg.viewmodel)"
    title=" " action="show: slideDown;hide: slideUp" border="normal">

    <style src="/css/${g0r0c0.version}/safirRamses.css" />
    <div align="left" style="margin:15px; margin-top:0">            
        <hbox sclass="title">
            <label value="${vm.title}" style="font-size:20px; color: black;"/>

        <div style="margin-top:15px; margin-bottom:10px;">

            <listbox id="workingInvoiceList" model="@load(vm.workingInvoiceList)" sclass="smartlist" mold="paging" pageSize="5" width="100%">
                <listhead sizable="true">
                    <listheader label="${labels.invoice.massoperation.number}" sort="auto(invoice.number)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.account}" sort="auto(invoice.accountNumber)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.company}" if="${vm.displayReject}" sort="auto(invoice.companyName)" width="190px" height="36px" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.company}" if="${!vm.displayReject}" sort="auto(invoice.companyName)" height="36px" hflex="1" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.family}" if="${vm.displayInvoiceFamilyColumn}" sort="auto(invoice.family)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.period}" sort="auto(invoice.period)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader height="36px" hflex="min" align="right" sort="auto(invoice.amountWithoutTax)" >
                        <label value="${labels.invoice.massoperation.amount}" style="font-weight: bold;" multiline="true"/>
                    <listheader label="${labels.invoice.massoperation.currency}" sort="auto(invoice.currency)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.creationdate}" sort="auto(invoice.creationDate)" height="36px" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.state.title}" sort="auto(statusLabel)" height="36px" visible="@load(vm.displayReject)" hflex="min" style="font-weight: bold;"/>
                    <listheader label="${labels.invoice.massoperation.reject}" sort="auto(rejectReason)" height="36px" visible="@load(vm.displayReject)" hflex="1" style="font-weight: bold;"/>

                <template name="model" var="each">
                        <listcell label="${each.invoice.number}"/>
                        <listcell label="${each.invoice.accountNumber}"/>
                        <listcell if="${vm.displayReject}">
                        <div sclass="ellipsis">
                            <label value="${each.invoice.companyName}"/>
                        <listcell if="${!vm.displayReject}">
                        <div sclass="ellipsis">
                            <label value="${each.invoice.fullCompanyName}"/>
                        <listcell if="${vm.displayInvoiceFamilyColumn}" label="${each.invoice.family}"/>
                            <label value="@load(each.invoice.period) @converter(vm.periodShortConverter)" />
                        <listcell label="${each.invoice.amountWithoutTax}"/>
                        <listcell label="${each.invoice.currency}"/>
                           <label value="@load(each.invoice.creationDate) @converter(vm.dateShortYYConverter)" />
                        <listcell label="${each.statusLabel}"/>
                        <listcell label="${each.rejectReason}"/>

        <separator orient="horizontal" bar="true" width="100%" />

        <space height="10px" />
        <div align="right">
            <button sclass="inactiveButton" id="closeBtn"
                onClick="@command('startWindowClosure', win=modalWindow)" />
            <space width="3px"/>
            <button sclass="activeButton" id="validBtn" disabled="@load(vm.confirmButtonEnabled)"
                onClick="@command('submit', win=modalWindow)" autodisable="validBtn, closeBtn" />


Do you have any idea to help me to solve the problem ?

delete flag offensive retag edit

1 Reply

Sort by ยป oldest newest

answered 2020-01-31 14:57:01 +0800

MDuchemin gravatar image MDuchemin
1561 1 5
ZK Team

Hi there,

Does the resizing happen a few full seconds after page load (2-5s) or during the page rendering (<1s)? Flexing in headers require the content to be loaded in order to calculate the column min size, so it could be that rendering all of the listitems is taking some rendering time. Did you disable render on demand, or are you loading a large number of listitems from page render? I'm not seeing expensive content in the template (no drop-down with a lot of options, etc.), so I'm assuming that individual listitems aren't too big.

A good way to understand what's going regarding the load timing would be to use Chrome developer tools > Performace and record a performance trace. That should give you a hint of what the client does while waiting on the header to resize.

Also, if you have any overrides or custom scripts, you may want to disable them temporarily to check if they affect this rendering time.

link publish delete flag offensive edit
Your reply
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

1 follower



Asked: 2020-01-30 01:05:27 +0800

Seen: 6 times

Last updated: Jan 31

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More