Trying to alter the width in a GridView column interactively in .NET via .css file. Should be easy, but can't get it to work. Have it set up in the RowDataBound script in .Net as:
e.Row.Cells[i].CssClass = "midwidth"
The corresponding value in the .css file reads:
table tr td.midwidth {
width: 450px;
}
.Net simply does not adjust the width accordingly. I even add a background color change in the td.midwidth designation (background: #color), and it reads and alters the background color accordingly, just does nothing with the column width.
It could be that other columns are larger and the total width of all columns is bigger than the width of the gridview in which case your column is getting scaled down regardless of width set. Check your gridview width is correct and other columns.
it appears the problem is that there are just too many columns. If I scale down the number of columns, it adjusts the width just fine. But I'll need to have all of the columns. Anything I can do about this, or do I just have to live with it? I have
a horizontal scroll bar on the grid, but it doesn't help. Just too many columns, and too much real estate involved.
Can I assume you are trying to keep it all on the page as well i.e. no scroll bars?
If it doesn't fit on the page you might have to consider using scroll bars. If you want specific width columns then I suggest you create a container div with an overflow, for example you have this html code:
What this will achieve is you will have an area of a set width and height which will provide scrolling for the content held within it which will allow you to make the gridview as wide as you want, obviously adjust the gridinnercontainer width accordingly.
dotnetdev02
Member
74 Points
103 Posts
altering column width via css in .NET
Apr 19, 2012 06:45 PM|LINK
hello all -
Trying to alter the width in a GridView column interactively in .NET via .css file. Should be easy, but can't get it to work. Have it set up in the RowDataBound script in .Net as:
e.Row.Cells[i].CssClass = "midwidth"
The corresponding value in the .css file reads:
table tr td.midwidth {
width: 450px;
}
.Net simply does not adjust the width accordingly. I even add a background color change in the td.midwidth designation (background: #color), and it reads and alters the background color accordingly, just does nothing with the column width.
What am I missing here?
breath2k
Contributor
2101 Points
821 Posts
Re: altering column width via css in .NET
Apr 19, 2012 07:43 PM|LINK
It could be that other columns are larger and the total width of all columns is bigger than the width of the gridview in which case your column is getting scaled down regardless of width set. Check your gridview width is correct and other columns.
res.web
Member
546 Points
138 Posts
Re: altering column width via css in .NET
Apr 20, 2012 04:51 AM|LINK
try writing like this
.midwidth {
width: 450px;
}
and see whether it works or not
riak
Member
268 Points
88 Posts
Re: altering column width via css in .NET
Apr 20, 2012 07:26 AM|LINK
table tr td.midwidth {
width: 450px;
}
td.midwidth is not the same as td .midwidth (see the space)
That could be your problem
dotnetdev02
Member
74 Points
103 Posts
Re: altering column width via css in .NET
Apr 20, 2012 03:32 PM|LINK
it appears the problem is that there are just too many columns. If I scale down the number of columns, it adjusts the width just fine. But I'll need to have all of the columns. Anything I can do about this, or do I just have to live with it? I have a horizontal scroll bar on the grid, but it doesn't help. Just too many columns, and too much real estate involved.
breath2k
Contributor
2101 Points
821 Posts
Re: altering column width via css in .NET
Apr 20, 2012 03:40 PM|LINK
Can I assume you are trying to keep it all on the page as well i.e. no scroll bars?
If it doesn't fit on the page you might have to consider using scroll bars. If you want specific width columns then I suggest you create a container div with an overflow, for example you have this html code:
<div id="gridcontainer"> <div id="gridinnercontainer"> <GridView ID="gv1" runat="server" Width="yourtotalwidth" etc... </div>Then add CSS to handle this:
#gridcontainer { width:980px;height:300px;overflow:auto; }#gridinnercontainer { float:left;width:3000px; }
What this will achieve is you will have an area of a set width and height which will provide scrolling for the content held within it which will allow you to make the gridview as wide as you want, obviously adjust the gridinnercontainer width accordingly.