Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
615
MVC5 Table/Header Alignment?
posted

Hello,

I'm using Visual Studio 2013, and I've got an MVC5 project which uses Bootstrap 3.1.0 as the default CSS theme.  I'm noticing a funny CSS issue with the iggrid, and I wanted to check with the forum to see if it's something that can be reproduced.

Basically, it appears that in any browser except Chrome, the table element of the grid is slightly out of alignment with the header & footer.  I attached a zip file showing how it appears in the three major browsers.  You can see along the right side of the grid that the table isn't quite aligned with the header. I could also try to work up a sample project if that would help.  This isn't something that affects the usability of the grid, but it's a bit of a visual annoyance (but maybe it's just my site).

Here's my style bundle.  I use the MVC Loader() on any page that needs the grid:

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",
                        "~/Content/site.css"));

In my site.css, I have the following override to prevent weird issues with iggrid and bootstrap's use of border-box:

.ui-widget.ui-iggrid *, .ui-widget.ui-iggrid *:before, .ui-widget.ui-iggrid *:after {
    -webkit-box-sizing: initial !important;
    -moz-box-sizing: initial !important;
    box-sizing: content-box !important;
}

I realize this is pretty low priority, but if anyone could take a minute to review my screenshots, I'd be grateful to learn if this is something wrong with my site, or if there could be an adjustment in the grid CSS that would bring this table back into alignment.

Thank you!

iggrid alignment.zip