'MVC 3 Razor webgrid - how to change the table width

I have a problem where whatever I try I can't change the width of the webgrid table. It ignores the css of its parent div and changing the width of the grid using css doesn't have any effect.

Webgrid partial view

@model IEnumerable<UserManager.Models.vw_UserManager_Model>
@{WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");}
<b>@Html.Label("Total number of records displayed: ")</b>
@Html.Label(grid.TotalRowCount.ToString())
@grid.GetHtml(
    fillEmptyRows: true,
        tableStyle: "webgrid",
                alternatingRowStyle: "webgrid-alternating-row",
                headerStyle: "webgrid-header",
                footerStyle: "webgrid-footer",
                selectedRowStyle: "webgrid-selected-row",
            rowStyle: "webgrid-row-style",
        mode: WebGridPagerModes.All,
columns: new[] {
    grid.Column("UserName"),
    grid.Column("salutation"),
    grid.Column("FirstName"),
    grid.Column("LastName"),
    grid.Column("Password"),
     grid.Column(header: "Session Status", canSort: true, format: @<text><input name="User logged in" 
      type="checkbox"  @(item.session_status == 1 ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /></text>),
    grid.Column("isactive"),
    //grid.Column("isapproved"),  
    grid.Column("MaxConcurrentUsers"),
    grid.Column("email"),
    grid.Column("group_name"),
   grid.Column("module_name"), 
     grid.Column(header:"Edit", format:@<text><div id="btnEditSelectedRow">
         @Html.ActionLink("Edit record", "EditUser", "UserManager", new {
         userid = item.userid,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive,
         isapproved = item.IsApproved,
         maxconcurrentusers = item.MaxConcurrentUsers,
         email = item.email, 
         rowtype = item.rowtype,
         module = item.module_name, 
         group = item.group_name }, null)</div></text>),

    grid.Column(header:"Delete", format:@<text><div id="btnDelSelectedRow">
         @Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
         userid = item.userid,
         username = item.UserName,
         salutation = item.salutation,
         firstname = item.FirstName, 
         lastname = item.LastName, 
         password = item.Password, 
         isactive = item.isactive, 
         email = item.email, 
         module = item.module_name, 
         rowtype = item.rowtype,
         group = item.group_name }, null)</div></text>),
})

Webgrid CSS

.webgrid
    {
        width: 500px;
        border: 0px;
        border-collapse: collapse;
        oveflow:scroll auto;
    }

    .webgrid a
    {
       color: #000;
   }

   .webgrid-header
   {
       padding: 6px 5px;
       text-align: center;
       background-color: #e8eef4;
       border-bottom: 2px solid #3966A2;
       height: 40px;

       border-top: 2px solid #D6E8FF;
       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }

   .webgrid-footer
   {
       padding: 6px 5px;
       text-align: center;
       background-color: #e8eef4;
       border-top: 2px solid #3966A2;
       height: 30px;

       border-bottom: 2px solid #D6E8FF;
       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }

   .webgrid-alternating-row
   {
       height: 30px;
       background-color: #f2f2f2;
       border-bottom: 1px solid #d2d2d2;

       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }

   .webgrid-row-style
   {
       height: 30px;
       border-bottom: 1px solid #d2d2d2;

       border-left: 2px solid #D6E8FF;
       border-right: 2px solid #D6E8FF;
   }

   .webgrid-selected-row
   {
       font-weight: bold;
   }

enter image description here

Solution 1:^[1]

The problem is in the .css file that Visual Studio generated. Open Content\Site.css & you will find a style definition like:

   .content-wrapper {
       margin: 0 auto;
       max-width: 960px;
   }

the max-width is too small for your table, so enlarge it. (And reload the browser b/c broswers tend to cache .css files)

Also, you can adjust the Table DataCell that has the bad wrapping by replacing with (Although, if you only adjust the w/out increasing the max width, it will force some other cell(s) to wrap)

Solution 2:^[2]

Site.css generated by MVC3 has .page {width: 98%;} You can change that to some fixed value, like, "width: 2000px;". This helps, but if someone knows how to make it expand to the size of the WebGrid, that would be much better!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	William
Solution 2	soRich

'MVC 3 Razor webgrid - how to change the table width

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]