JQuery UI Theme : No Widgets Display Correctly

Question

Disclaimer - A * denotes somewhere where I wasn't able to post what I wanted, since this is my first ever post on stack overflow, so I instead explain what I wanted to display. :)

I seem to be having a problem with getting a rolled theme from Jquery UI to work correctly. First when I open the example file given in the download it looks like this.

Everything in general looks scrunched up like that, like there isn't any padding, margins, borders, etc.

The next image is JQueryUI base theme, base/all.css being implemented on my site.

Looks correct, but it's not what I want JqueryUI to look like. Below, is me trying to implement the theme theme/jquery-ui.css instead of the base and I get the same result as in the example.

*I had wanted to include a link to the theme being implemented on my site, but I don't have enough reputation to include more than 2 links. Anyways, it looks the exact same as how it looks in the example html.

The weird thing is when I am "rolling" the theme on the website everything looks how I would expect it to. For reference to my theme, here is the link to it.

*Ok another lie no link, but even downloading one of the Jquery UI themes from the roller gallery I get the same scrunched up results.

I'm wondering if I'm just misunderstanding how to use the theme? My understanding is you can just replace the all.css with the customer jquery-ui.css. In both I have every component possible selected when downloading.

Picture of implementation on my site https://onedrive.live.com/redir?resid=D5CFB5EAED88EA00!396260&authkey=!ADIUSBoEtkxkBMw&v=3&ithint=photo%2cPNG the link to the theme roller is unfortunately too long to add to a comment — Richard Cawthon, Aug 19 '15 at 23:52
@Tim but I have beat the system! Link to plain text document with link that is too long :) https://onedrive.live.com/redir?resid=d5cfb5eaed88ea00!396263&authkey=!ANifwzytw-lEck8&ithint=file%2ctxt — Richard Cawthon, Aug 20 '15 at 00:00

score 0 · Accepted Answer · edited May 23 '17 at 12:29

Ok so I was able to solve my own problem, and it was actually thanks to another answer on stack overflow. Essentially it was a bundling issue in ASP.NET MVC, and me not completely understanding how you are supposed to use the theme. First things first here's what my bundle originally looked like.

            bundles.Add(new StyleBundle("~/Content/jqueryui").Include(
            "~/External/Content/themes/base/all.css",
            "~/External/Content/themes/green/jquery-ui.css",
            "~/External/Content/themes/green/jquery-ui.structure.css",
            "~/External/Content/themes/green/jquery-ui.theme.css"
            ));

Thanks to this answer, I decided to check the order in which it was actually rendering on the page (which in hindsight I should have done it the first place). How do I configure MVC's style bundling order? This helped me find out that indeed the themes were rendering first and then the base.css even though that's not the order they were in the bundle.

So I split out the base.css into an explicit call before that bundle (also removed the base.css from the bundle), and everything worked perfectly! This is how it is in the head tag of my Layout page.

@Styles.Render("~/External/Content/themes/base/all.css")
@Styles.Render("~/Content/jqueryui")

So two things to check when using a JQuery UI theme with ASP.NET MVC, first the bundling order (see what order it's rendering on the page) and if you didn't know to use the base.css (or the select element css you are using) along with the theme then do that!

JQuery UI Theme : No Widgets Display Correctly

1 Answers1