[RESOLVED]MVC 5 Web Application WebGrid helper displaying odd numbered rows one cell to the right

Hello,

I’m developing a C#, Asp.Net, MVC 5, EF 6, Code First Web Application in Visual Studio 2013 Pro.

In a PartialView page it displays a WebGrid helper with only three columns that looks like this:

Product   ID

Name

Short   Description

 

 

1

$5 Virtual Gift Card

$5 Gift Card. Gift Cards must be redeemed throug

2

$25 Virtual Gift Card

$25 Gift Card. Gift Cards must be redeemed

 

 

3

Toshiba Satelite A305-S6908

Stylish, highly versatile laptop with 15.4-inch LCD

4

Ray Ban Aviator Sunglasses

Aviator sunglasses are one of the first widely

 

 

5

Levi’s Skinny 511 Jeans

Levi’s Faded Black Skinny 511 Jeans

I can’t figure out why the odd rows are shifted to the right one cell and an additional cell is added to the grid on the right to display the third column of the data for those odd rows.

I used F12 Developer Tools and drilled down to the individual rows for the grid: “<table><tbody><tr>”.  I noticed that a css property for the “row” class has a “content: normal” property.  The “alt” class does not have that property.

If I uncheck the “content: normal” property while in the Developer Tools, It shifts the odd rows to the left one cell and the display looks the way it should.

Does anybody know how to fix this weird problem?

Any help would be gratefully appreciated.

Thanks,
Tony

Here is my Products.cshtml file:

 

@model IEnumerable<LakesidePurchasing.Models.ProductInformation>
@{
        Layout = null;
}

@{
    var columns = new[] { "ID", "Name", "ShortDescription" };
}

<!DOCTYPE HTML>

<html>
<head>

    <title></title>
    <meta name="viewport" content="width=device-width" />

    <style type="text/css">
        .webGrid {margin: 5px;padding: 10px;border: 1px #c8c8c8 solid;border-collapse: collapse;min-width: 550px; background-color: #fff;color: #fff;}
        .header th{font-weight: bold;background-color: #030D8D;color: #fff;padding: 10px;text-align: center;}
        .header a:link,.header a:visited,.header a:active,.header a:hover {color: #fff;}
        .header a:hover {text-decoration:underline;}
        .webGrid tr.alt{background-color: #efeeef;}
        .webGrid tr:hover{background-color: #f6f70a;}
        .alt td{padding: 10px;margin: 5px; color: #333;}
        .row td{padding: 10px;color: #333;}
        .gridFooter td{padding: 10px; background-color: #c7d1d6;color: #999;font-size: 12pt;text-align: center;}
        .gridFooter a{font-weight: bold;color: #333; border: 1px #333 solid;}

    </style>

</head>
<body>
    <div>
    </div>

    <div>
        <h2>Products</h2>
    </div>
    <div id="gridContent">
        @{
            var grid = new WebGrid(Model, columnNames: columns, ajaxUpdateContainerId: "gridContent");
        }

        @grid.GetHtml(tableStyle: "webGrid",
                headerStyle: "header",
                alternatingRowStyle: "alt",
                selectedRowStyle: "select",
                rowStyle: "row",
                footerStyle: "gridFooter",
                mode: WebGridPagerModes.Numeric | WebGridPagerModes.All,
                nextText: "Next",
                previousText: "Previous",
                htmlAttributes: new { id = "grid" },
                caption: "Products Used",
                displayHeader: true,
                columns: grid.Columns(
                grid.Column(columnName: "ID", header: "Product Id"),
                grid.Column("Name", " Name"),
                grid.Column("ShortDescription", "Short Description", style: "description")
                    )
                )
    </div>

</body>
</html>

Hi TGirgenti,

I made a test with your code in MVC5 project, I can’t reproduce that issue, also I don’t fine the CSS of
content:normal in your code.

I suggest that you could try it in other browser to check whether it has the same issue and please try it in a new project.

On the other hand, you may share the project on the OneDrive.

Best Regards

Starain

Hello Starain.

Thanks for your help.

I solved this by adding this:

.row::before{content: none;}

To my stylesheet.

I’m not sure of why that fixed it, but I tried it and it worked.

Thanks,
Tony

Leave a Reply