:: Forum >> Version 2 >>

column width percent

More information on this topic is available in the documentation section: /aw.ui.grid/column-width.html.

I am trying to use percentages for my column widths. The end result of this code is that each column has a width of what looks like 200%, not 20%, of the document.

What am I doing wrong?

Thanks!

<style>
    
#schedule width100%; height100%; border-bottom0px}
    
#schedule .aw-grid-row {height20pxborder-bottom1px solid #ccc}

    
#schedule .aw-alternate-even {background#fff;}
    
#schedule .aw-alternate-odd {background#eee;}

    
#schedule .aw-mouseover-row {background#ccc;}
    
#schedule2 .aw-mousedown-row {background#999;}

    
#schedule .aw-column-{width20%; border-right1px dotted #ccc;}
    
#schedule .aw-column-{width20%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width20%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width20%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width20%; border-right1px dotted #ccc;text-alignright}

    
#schedule .aw-grid-headers {colorblue}

    
#schedule .active-scroll-barsoverflowhidden }

    
#schedule .aw-mouseover-header {colorred;}
    
#schedule .aw-mousedown-header {coloryellow;}

</
style
<script>

    var 
myData = [
        [
"09:00""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        [
"09:15""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        [
"09:30""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        [
"09:45""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        [
"10:00""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
        [
"10:15""Black, Jack""Bartfast, Slarti""Office Visit""<input type='select'><option>Pending</option><option>Checked In</option><option>Checked Out</option><option>Canceled</option></select>"],
    ];

    var 
myHeaders = ["Time""Patient""Provider""Visit Type""Status"];


    var 
obj = new AW.UI.Grid;

    
obj.setCellData(myData);
    
obj.setHeaderText(myHeaders);

    
obj.setColumnCount(5);
    
obj.setRowCount(6);

    var 
money = new AW.Formats.Number;
    var 
string = new AW.Formats.String;
    var 
time = new AW.Formats.Date;
    
time.setTextFormat("hh:mm");
    
money.setTextFormat("$ #,###.##");
    var 
number = new AW.Formats.Number;

    
obj.setCellFormat([string,string,string,string,string]);

    
obj.setCellEditable(false);
    
obj.setId("schedule");    // necessary for CSS rules

    
document.write(obj);


</
script
Nihal
Wednesday, March 8, 2006
Column width in % is not supported in the current version. However there is one trick which might work - setting row width to 1000% to avoid wrapping the cells and setting cell widths in % but 1/10 of 'normal' size -

<style>

    
#schedule .aw-grid-headers,
    
#schedule .aw-grid-footers,
    
#schedule .aw-grid-view width1000% }

    
#schedule .aw-grid-row {width100%}
    
#schedule .aw-column-space {width10%}


    
#schedule width100%; height100%; border-bottom0px}
    
#schedule .aw-grid-row {height20pxborder-bottom1px solid #ccc}

    
#schedule .aw-alternate-even {background#fff;}
    
#schedule .aw-alternate-odd {background#eee;}

    
#schedule .aw-mouseover-row {background#ccc;}
    
#schedule2 .aw-mousedown-row {background#999;}

    
#schedule .aw-column-{width2%; border-right1px dotted #ccc;}
    
#schedule .aw-column-{width2%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width2%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width2%; border-right1px dotted #ccc;text-alignright}
    
#schedule .aw-column-{width2%; border-right1px dotted #ccc;text-alignright}

    
#schedule .aw-grid-headers {colorblue}

    
#schedule .active-scroll-barsoverflowhidden }

    
#schedule .aw-mouseover-header {colorred;}
    
#schedule .aw-mousedown-header {coloryellow;}
</
style>
 
Alex (ActiveWidgets)
Wednesday, March 8, 2006



This topic is archived.

Back to /aw.ui.grid/column-width.html

Documentation:

Forum search