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!
Hello kylemilner,
Thank you for your feedback.
I'm glad that you were able to resolve the issue.
If you need any further assistance regarding this matter, do not hesitate to contact me.
Sincerely,
Tsanna
Hello Tsanna,
Thanks for taking the time to look at this problem. In the end, the problem was caused by a custom rule that I had written (and forgotten about). Sorry for the trouble!
Thank you for posting in our community.
I took a look at the screenshots that you've attached, however I am unable to reproduce this behavior on my side.
It would be great appreciated if you could send me an isolated sample that demonstrates the issue in order to test it, because the issue might be related to the custom styles that you're using.
Looking forward to your response.