gridzkzul

Hflex in Grid. Doesn't show correclty after resize the Browser

enter image description here

I have this grid with this data. The columns are set with hflex="min". Here is my .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>

It's working okay, when the browser is resized with a small width I can see the grid with a scrrolbar and the info is legible. but when the browser is resized the problem in the image occurs. I find one solution, which is set hflex in the grid, but when the browser is resized very small, the horizontall scrollbar doesn't appear.

Solution

  • I think that columns must cover the 100% width of the grid, but in yours i see empty space on the right side. So don't use hflex="min" and width="15%". You should use hflex="1" for at least one column (the column that contains the most important information) and hflex="min" for the others. Try this:

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