Question

我创建了一个带有列表框和按钮的网页，问题是当页面加载时，两个组件的右侧会出现一个空格，但如果调整页面大小，则空格会消失。

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

以全屏加载页面时： 1

调整大小后： 2

问题是什么？

修改

白色空格出现在chrome，firefox和iExplorer中，zk的版本是8.0.1.1

Answer 1

我编辑了your fiddle to this。你能检查一下它是否符合你的要求？为了正确，我改变了一些事情：

在分隔符中使用spacing属性代替height。
vbox已更改为vlayout，因为此处的align属性是绝对的，而vlayout在生成的html中更轻。
删除不需要的width和hflex。
删除不需要的height和vflex，并仅在需要的地方进行设置。

zk中的右侧空白区域

1 个答案: