Hello,

I have a question about how to use the Infragistics theme CSS in a complimentary fashion with Bootstrap 3 and jQueryUI (I've read through some other posts and the online documentation, but haven't quite found an answer that helps me).

Basically, I've started an MVC5 project, so I have Bootstrap 3 as the base template for my site.  Also, I use jQueryUI for some specific features, like autocomplete.  The first problem I noticed was that the standard jQueryUI CSS was displaying the autocomplete dropdown box the way I wanted, but when I loaded a grid onto the page, the CSS would change the autocomplete dropdown to a style that didn't fit my page (I'm using the loader MVC Helper if that matters at all).  I was confused at first as to why the grid CSS would be overriding the autocomplete CSS, but then I learned a bit more about how these themes work, and I just commented out some portions of the Infragistics CSS that I didn't like.  However, I'm not sure if this is really a recommended way of doing things.  I'm pretty new to web development, so there's a pretty good chance I just haven't learned how to make these two CSS files play nice together.

Another problem is that the pagination section of my grid is messed up in my site.  I've attached two screenshots that contrast how it looks in the online sample and how it looks on my page.  I think I tracked it down to the Bootstrap border-box style that is applied site-wide, but undoing that style seems to have negative effects on other parts of my site.

I know there must be a million different combinations of styles that could interact with Infragistics - I was just hoping that maybe one of the support devs have had experience with this since it's just a basic MVC5 page.  Any advice or suggestions on how to organize my CSS so that my stylesheets don't step on each other would be greatly appreciated.  I feel like I'm doing something wrong and unpredictable by going into the Infragistics stylesheets and commenting things out.

Here's my style bundle:

bundles.Add(new StyleBundle("~/Content/css").Include(
                        "~/Content/bootstrap.css",  
                        "~/Content/themes/base/jquery-ui.css",
                        "~/Content/site.css"));

On the page where I display my grid, the autocomplete feature is loaded in initially, and the grid + loader is only displayed if the user initiates an ajax call.

Thank you!