alankent
10-01-2008, 11:15 PM
I would like to have a grid which automatically sizes to the web browser width. This is easy. The problem I have is trying to have sensible behaviour if the user then resizes the browser window afterwards.
I tried setting the column widths to a proportion of the parent, which seems to work. Resizing the browser window is fine. BUT if the user resizes a column, that column then becomes fixed at the specified width while the other column continues to dynamically resize with the browser resize. It feels strange to users. (To see what I mean, try the code below. Resizing the browser window causes the columns to adjust proportionally - nice! Then manually resize one column. Resizing the browser window now causes some columns to dynamically resize, but the manually set column widths no long resize. This feels funny.)
One solution might be to set the original column widths based on the browser width when the component is first displayed. If they resize the browser, well the user has to resize columns by hand - but at least no strange "some columns resize and others don't". (I don't know how to do this.)
Alternatively, it would be nice if when adjusting one column the other columns resized in proportion to use up the free space. That is, always use up the full width of the browser with the grid. (I don't know how to do this either.)
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<dataset name="users">
<user>
<name>Joe</name>
<description>Tall, handsome</description>
</user>
<user>
<name>Sally</name>
<description>Thin and lean</description>
</user>
</dataset>
<grid datapath="users:/" width="100%" shownitems="5"
bgcolor0="#ccccff" bgcolor1="#ddddff" bgcolor="#eeeeff">
<gridtext datapath="name/text()" editable="false"
width="${parent.width*30/100}">Name</gridtext>
<gridtext datapath="description/text()" editable="false"
width="${parent.width*70/100}">Description</gridtext>
</grid>
<simplelayout axis="y"/>
</canvas>
Thanks for any suggestions!
I tried setting the column widths to a proportion of the parent, which seems to work. Resizing the browser window is fine. BUT if the user resizes a column, that column then becomes fixed at the specified width while the other column continues to dynamically resize with the browser resize. It feels strange to users. (To see what I mean, try the code below. Resizing the browser window causes the columns to adjust proportionally - nice! Then manually resize one column. Resizing the browser window now causes some columns to dynamically resize, but the manually set column widths no long resize. This feels funny.)
One solution might be to set the original column widths based on the browser width when the component is first displayed. If they resize the browser, well the user has to resize columns by hand - but at least no strange "some columns resize and others don't". (I don't know how to do this.)
Alternatively, it would be nice if when adjusting one column the other columns resized in proportion to use up the free space. That is, always use up the full width of the browser with the grid. (I don't know how to do this either.)
<?xml version="1.0" encoding="UTF-8"?>
<canvas debug="true">
<dataset name="users">
<user>
<name>Joe</name>
<description>Tall, handsome</description>
</user>
<user>
<name>Sally</name>
<description>Thin and lean</description>
</user>
</dataset>
<grid datapath="users:/" width="100%" shownitems="5"
bgcolor0="#ccccff" bgcolor1="#ddddff" bgcolor="#eeeeff">
<gridtext datapath="name/text()" editable="false"
width="${parent.width*30/100}">Name</gridtext>
<gridtext datapath="description/text()" editable="false"
width="${parent.width*70/100}">Description</gridtext>
</grid>
<simplelayout axis="y"/>
</canvas>
Thanks for any suggestions!