# auto resize of grid columns

ofeus
39

Hello,

I am using zk 5.0.5 on a small test project an try to find out how the sizing mechanism for columns in a grid work.

I have a grid with the following zul definition:

<grid width="500px">
<columns>
<column width="100px">Left</column>
<column width="200px">Center</column>
<column width="100px">Right</column>
</columns>

<rows>
<row>
<label value="Left1"/>
<label value="Center1"/>
<label value="Right1"/>
</row>
</rows>
</grid>


The total width of the grid is set to 500px and the three columns have a width of 100px, 200px and 100px.
So summation of the column widths is 400px. Because of the diffence of 100px to the grid width, there is an unused part of 100px in the grid.

Is there any auto resize functionality in the grid component which automatically allocates the remaining width to the column, so that the columns total width fits the grid width ?

Thank you for hints.

Greetings,

Sven

delete retag edit

## 6 Replies

SimonPai
1696 1

Try:

<grid width="500px">
<columns>
<column width="100px">Left</column>
<column hflex="1">Center</column>
<column width="100px">Right</column>
</columns>
<rows>
<row>
<label value="Left1"/>
<label value="Center1"/>
<label value="Right1"/>
</row>
</rows>
</grid>


Regards,
Simon

ofeus
39

Hi Simon,

thank you for the hint to the hflex attribute.
Now the auto resize works for grids that are wider than their columns.

But now I have problems with grids that have smaller total width than the summation of their column widths.
If the grid becomes smaller then 200px the center column will be resized to a width of 0px and for a user it looks like the column disappeared.

Is it possible to set a minimum width for a column, that prevent the column from disappearing.
I think the best solution would be, the if the total grid width becomes smaller than the columns widths, a horizontal scrollbar should appear.

Is there any configuration possible to implement such a solution.

Greetings,

Sven

SimonPai
1696 1

In this case you will need to try the new feature in ZK 5.0.6: Grid with Hflex.

Try

<grid width="500px" span="1">
<columns>
<column width="100px">Left</column>
<column width="200px">Center</column>
<column width="100px">Right</column>
</columns>
<rows>
<row>
<label value="Left1"/>
<label value="Center1"/>
<label value="Right1"/>
</row>
</rows>
</grid>


Note that this feature is only available in 5.0.6.

Regards,
Simon

ofeus
39

Hi Simon,

thank you for your help. Very nice timing. The new feature in the current zk release (5.0.6) just nearly solved my problem.

But I thought the configuration values are to restricted. And the distribution mechanism is not very flexible.
So I decided to extend the new span attribute functionality on my own.

I extended the distribution mechanism to accept comma separated lists of column indexes.
Now it is possible for me to specify minimum or fix width of columns by using the width attribute of column components. The distribution of empty space could be specified by setting a list of column indexes in the span attribute of the grid component.
The remaining empty space is than distributed between the specified columns considering the width ratio of the columns.

I created a feature request ticket in the sourceforge ticket system. A patch file with the needed changes is attached to the ticket.

https://sourceforge.net/tracker/?func=detail&aid=3195148&group_id=152762&atid=785194

Regards,

Sven

niting
111

Hi ofeus
Did you try using grid.setSizedByContent(true)?

Thanks
Nitin

ofeus
39

Hi Nitin,

I tried grid.setSizedByContent(true) and the hflex='min' attribute on the column components with the following example:

<grid width="500px" style="border: 1px solid black;" sizedByContent="true">
<columns>
<column label="id" width="40px"/>
<column label="name" width="100px"/>
<column label="birthdate" width="70px"/>
</columns>

<rows>
<row>
<label value="12"/>
<label value="John Smith"/>
<label value="Street 1"/>
<label value="1981/07/10"/>
</row>
</rows>
</grid>


Setting grid.setSizedByContent(true) together with the width attributes on the column components results in a horizontal scrollbar, because the columns becomes to wide.
Using grid.setSizedByContent(true) without width definitions or using the hflex='min' on all columns results in a suboptimal result, because the date column where much wider than needed.

Beside this, the grid layout will depend on the content of the rows. Every time the content changes, the layout of the grid will change. I don't know if this happens even on paging.
I think the min flex and sizedByContent feature is nice for prototyping, but in the end the developer should be able to provide better hint information for the grid layout, like min column width or column width ratios.
So I think an extension is needed here.

Greetings,

Sven

[hide preview]