How do you set a columns width?

I have one column that I would like to have displayed wider than the rest. What file and code must I modify?

March 12,
.active-column-2 {width:100px}
March 23,
Column width is set via style sheets as demonstrated in the first answer above.
March 24,
Modifying: /app/web/htdocs/test/ActiveWidgets/runtime/styles/flat

I see .active-column-0{z-index:99}.active-column-1{z-index:98}.

etc.. in the grid.css file. When I modified the column-1 to use:


I saw no change. Am I doing something incorrect?

March 24,
Actually you have to insert

.active-column-0 {width:0px}

tags into your HTML code. The best place for it is just before you call
<?php echo activewidgets_grid($name, $data);?>

so you can control col widths for every grid (if you have more than one grid that is).

Too late for GB I guess, but it could spare someone else some time :)

August 12,
The reason you saw no change is because the last loaded style (inline if you're using any of the example programs) with the same class name takes precedence:

Something similar to this is generally listed at the top of most of the examples...

body, html {margin:0px; padding:0px; overflow:hidden; border:none}
a:visited {color:#009;}
.active-controls-grid {height:100%; font:menu}
.active-column-0 {text-align:left; border-right:1px #DDDDDD solid; border-bottom:1px #DDDDDD solid}
.active-column-1 {width:100px}
.active-column-2 {width:100px}
.active-column-3 {width:100px}
.active-column-4 {width:90px; text-align:right; color:#0033FF; cursor:hand}

FallenAngels example does exactly the same thing as modifying the style at the top of the grid file. Again, last loaded takes precedence.
August 15,
make sure you include it after

<link href='js/ActiveWidgets/runtime/styles/xp/grid.css' rel='stylesheet' type='text/css' ></link>

if you have one
August 19,
Is there any possibility to define column and header width using JavaScript?
August 25,
I have several grid on the same page, and I would like to be able to specify the width of each column for each grid.
That css solution is not working in this case.
We should be able to override it for a grid.
November 17,
If you do a Google search you can find JavaScript functions that change CSS values. If you use one of them then you can change the column width of any column for any grid (assuming that you have unique names for your grids). I have done this for ver 1.x and it works fine. For ver 2.x there are functions in the grid to change individual column widths.
Jim Hunter
November 18,
I'm tryin to figure out how can i capture the order a person selects by clicking on on the the following columns on activewidgets.Reason I ask is because i am tryin to display that same order onto a pdf

Thanks in adavance
December 6,
When trying to use the ActiveWidget grid within a DIV generated by the DoJo toolkit, everything seems ok, but the cell widths are auto-sized to each displayed value resulting in different widths for cells in the same column. Any suggestion how to solve this?
December 9,
Does in work in 'normal' DIV?
Does it work without Dojo loaded?
Alex (ActiveWidgets)
December 9,
I had a similar problem with beta 2.0. Because in my case the document was in strict mode, I needed to do the following to change the column width:

.aw-strict .aw-column-2 {width: 200px;}

Christof Wollenhaupt
December 18,

I want to adjust the coloumn width of datagrid at runtime. So that clients can adjust the column widths at runtime.
Plz help me.
August 11,
Hi ,
function workGetComponentCode()
compcode = new Array(1);
compcode[0] = "&nbsp;<input id='z1' type='Checkbox' name='chkItemBoxWork' value='1'>";
compcode[0] = compcode[0] + "<input id='z3' type='hidden' value=\""+arguments[0]+"\" id='educationalId' name='educationalId'>";
compcode[1] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input id='z4' type='text' value=\""+arguments[1]+"\" id='company' name='company' onfocus='isValidAllField();'>";
compcode[2] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id='z7' name='fromMonth' class=''>" +getComboValMonth(0,arguments[2])+"</select><select id='z7' name='fromYear' class=''>" +getComboVal(0,arguments[3])+"</select>";
compcode[3] = "<select id='z7' style='active-column-0' name='toMonth' class=''>" +getComboValMonth(0,arguments[4])+"</select><select id='z7' name='toYear' class=''>" +getComboVal(0,arguments[5])+"</select>";
compcode[4] = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select id='z7' name='workRole'class=''>" +getComboValRole(0,arguments[6])+"</select>";
return compcode;

i am calling this fun it is generating row but my prob is all combo box and text box are not coming in center even though i am using style in it
plzzzzzzzzzzz , help me its very urgent.(using GRID);

October 2,

This topic is archived.

See also:

Back to support forum