Right white space in zk

Question

I create a web page with a listbox and button, the problem is that when page loads, a white space appear at the right of both components, but if resize the page the spaces disappear.

<zk xmlns="http://www.zkoss.org/2005/zul">
    <div apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('com.valid.pmngr.product.ProductViewModel')" height="100%" width="100%" style="border: 3px solid red;">
        <style src="/css/style.css"/>
        <div height="94%" width="100%" style="border: 3px solid orange;">
            <vbox vflex="1" hflex="1" style="border: 3px solid blue;">
                <hbox align="end" width="100%" style="background-color:#282425; padding: 30px 0px 15px 60px">
                    <separator height="58px"/>
                    <image src="/img/Logo.png"/>
                </hbox> 
                <separator height="15px"/>

                <grid>
                    <auxhead>
                        <auxheader label="Products" zclass="auxheader-g"/>
                    </auxhead>
                    <columns />
                </grid>

                <listbox model="@load(vm.productStatusList)  @template((vm.displayEdit and each.editingStatus) ? 'editable' : 'noneditable')"
                 vflex="1" >
                    <listhead sizable="true">
                        <listheader label="Name" align="center"/>
                        <listheader label="Vertical" align="center"/>
                        <listheader label="Business unit" align="center"/>
                        <listheader/>
                    </listhead>

                    <template name="noneditable">
                        <listitem>
                            <listcell>
                                <label width="98%" value="@bind(each.product.name)" />
                            </listcell> 
                            <listcell>
                                <label width="98%" value="@bind(each.product.vertical)" />
                            </listcell>
                            <listcell>
                                <label width="98%" value="@bind(each.product.businessUnit)" />
                            </listcell>
                            <listcell>
                                <button image="/img/edit.png" onClick="@command('edit')"/>
                                <button image="/img/delete.png" onClick="@command('delete')" />   
                            </listcell>    
                        </listitem>
                    </template>
                </listbox>

            </vbox>
        </div>
        <div vflex="min"  style="border: 3px solid purple;">
           <vbox hflex="1" vflex="1" style="border: 3px solid black;">
                <button label="New"  onClick="@command('newProduct')" />
           </vbox>
        </div>    
    </div>
</zk>

When page loads in full screen: 1

And after resize: 2

what is the problem?

EDIT

The white spaces appear in chrome, firefox and iExplorer and the version of zk is 8.0.1.1

Answer 1

I edited your fiddle to this. Can you check it out it meets your requirements?
I altered some things, for correctness :

• Using spacing attribute in separator in stead of height.
• vbox changed to vlayout as the align attribute is absolute here, and vlayout is lighter in generated html.
• Removing the width and hflex where it is not needed.
• Removing height and vflex where not needed and only set where needed.