Percentage Based Columns

When defining columns as:

#grid1 .aw-alternate-even {background: #EDF3FE;}
#grid1 .aw-alternate-odd {background: white;}
#grid1 .aw-header-0 {font-weight: bold; line-height: 20px;}
#grid1 .aw-rows-selected {background: #316ac5;}
.aw-grid-control { height: 100%; width: 100%; font-size: 11px; }

#grid1 .aw-column-0 { width: 25%; line-height: 25px; font-size: 11px; }

#grid1 .aw-column-1 { width: 25%; text-align: right; line-height: 25px; font-size: 11px; }

#grid1 .aw-column-2 { width: 25%; text-align: right; line-height: 25px; font-size: 11px; }

#grid1 .aw-column-3 { width: 25%; text-align: right; line-height: 25px; font-size: 11px; }

The columns each end up being 100% of the screen width (i.e. you have to scroll over 4 full window widths to get to the last column). Any ideas how to fix this?

Have you tried to set the column widht in code?

obj.setColumnWidth("25%", 0);
obj.setColumnWidth("25%", 1);
obj.setColumnWidth("25%", 2);
obj.setColumnWidth("25%", 3);

Dunno how relevant this is, but I note that the example use of setColumnWidth in examples/quickref/grid.htm shows the first arg to an integer representing pixels, i.e. 60 rather than "60px".

The first argument in the example is an integer, just like all of the examples of setting any width are also integers. But if you try to use a percent, it works fine as does setting the width using a string like setStyle("width", "100px"). There are a few ways to get the job done.