0

ここに画像の説明を入力

このデータを含むこのグリッドがあります。列は hflex="min" で設定されます。これが私の.zulです

<?page title="" contentType="text/html;charset=UTF-8"?>
<div sclass="container-resume-procedure">
    <grid sclass="grid-resume-procedure" height="130px">
        <auxhead>
            <auxheader  colspan="1">
                <label value=""/> 
            </auxheader>
            <auxheader  colspan="2" style="align:center">
                <label value="Resumen del Tramite"/> 
            </auxheader>
            <auxheader  colspan="1">
                <label value=""/> 
            </auxheader>            
        </auxhead>      
        <columns>
            <column label="Numero de Tramite" hflex="min" width="15%"  align="center"/>
            <column label="Cliente" hflex="min" width="15%" align="center"/>
            <column label="Orden" hflex="min" width="15%" align="center"/>
            <column label="Estado" hflex="min" width="15%" align="center"/>     
        </columns>
        <rows>
            <row>
                <label id="proced"/>
                <label id="resume_client"/>
                <label id="resumenumOrder"/>
                <label id="resume_status"/>
            </row>
        </rows> 
    </grid>
</div>

ブラウザが小さな幅でサイズ変更されると、スクロールバーでグリッドが表示され、情報が読みやすくなります。しかし、ブラウザのサイズを変更すると、画像の問題が発生します。グリッドにhflexが設定されている解決策が1つありますが、ブラウザのサイズが非常に小さく変更されると、水平スクロールバーが表示されません。

4

2 に答える 2

1

列はグリッドの 100% の幅をカバーする必要があると思いますが、右側に空のスペースが表示されます。hflex="min"したがって、 andは使用しないでくださいwidth="15%"。hflex="1"少なくとも 1 つの列 (最も重要な情報を含む列) とその他の列に使用する必要がhflex="min"あります。これを試して：

<column label="Numero de Tramite" hflex="min" align="center"/>
<column label="Cliente" hflex="1" align="center"/>
<column label="Orden" hflex="min" align="center"/>
<column label="Estado" hflex="min" align="center"/>
于 2016-12-01T09:10:43.833 に答える