Hflex im Raster. Zeigt keine Korrektheit nach Größenanpassung des Browsers

Question

Ich habe dieses Raster mit diesen Daten. Die Spalten werden mit hflex = "min" gesetzt. Hier ist meine .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> 

Es funktioniert gut, wenn der Browser mit einer geringen Breite der Größe verändert wird, kann ich das Gitter mit einem scrrolbar sehen und die Informationen lesbar ist. aber wenn der Browser die Größe ändert, tritt das Problem im Bild auf. Ich finde eine Lösung, die hflex im Raster eingestellt ist, aber wenn die Größe des Browsers sehr klein ist, wird die horizontale Bildlaufleiste nicht angezeigt.

Answer 1

Ich denke, dass Spalten die 100% Breite des Gitters abdecken müssen, aber in Ihrem sehe ich leeren Platz auf der rechten Seite. Verwenden Sie also nicht hflex="min" und width="15%". Sie sollten hflex="1" für mindestens eine Spalte (die Spalte, die die wichtigsten Informationen enthält) und hflex="min" für die anderen verwenden. 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"/> 

Answer 2

Sie müssen ID geben und invalidate() verwenden Sie diese Gitter wie diese zu aktualisieren:

grid id="grdProcedure" sclass="grid-resume-procedure" height="130px" 

als nur in Java-Klasse grdProcedure.invalidate(); hinzuzufügen.