[ACCEPTED]-Apply specific width in column of WebGrid in MVC3-razor
Accepted answer
You could use styles:
@grid.GetHtml(columns: grid.Columns(
grid.Column("Name", "Name", canSort: true, style: "name"),
grid.Column("Address", "Address", canSort: true, style: "address")
));
and in your CSS file:
.name {
width: 50px;
}
.address {
width: 300px;
}
0
To add to the good advice of Darin Dimitrov, would 9 further recommend a convention (since CSS 8 promotes reuse), try to use existing or 7 common styles for often used elements (e.g., columns)--remember 6 that you can apply multiple styles, separated 5 by a space here, too--they will simply be 4 merged into the resulting attribute.
@{
var grid = new WebGrid(Model, canSort: true, canPage: true, rowsPerPage: 10);
grid.Pager(WebGridPagerModes.NextPrevious);
@grid.GetHtml(columns: grid.Columns(
grid.Column("Name", "Name", canSort: true, style: "col-sm cssStyle2"),
grid.Column("Address", "Address", canSort: true, style: "col-med address"),
//other columns
));
}
/*styles*/
.col-sm { width: 100px; min-width: 90px; }
.col-med { width: 150px; min-width: 120px; } <--could be reused
.address { font-weight: bold; } <-- could be reused
.cssOther3 { font-weight: bold; } <-- may not be as not as reusable
.cssStyle2 { text-align: right; }
So, in 3 other words, you're not stuck with a single 2 style package a continue to have flexibility 1 when applying "reuse".
Only CSS
/*IE7+*/
th:first-child { width:30px; }
th:first-child + th { width:30px; }
th:first-child + th + th { width:100px; }
/*IE9 +*/
th:nth-of-type(1) { width:30px; }
th:nth-of-type(2) { width:30px; }
th:nth-of-type(3) { width:100px; }
th:nth-of-type(4) { width:200px; }
th:nth-of-type(5) { width:40px; }
0
Source:
stackoverflow.com
More Related questions
Cookie Warning
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.