Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am using jQuery ui dialogs in my MVC 3 app and for some reason, the style elements that are defined in my site.css file are applied everywhere except in the jquery dialogs.

I tried finding what's wrong using the Chrome Developper Tools, but I just can't figure it out. Any ideas?

Thanks!

UPDATE:

Here is how I referenced css files in _Layout.cshtml:

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dataTables/dt_page.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dataTables/dt_table.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/dataTables/dt_table_jui.css")" rel="stylesheet" type="text/css" />
share|improve this question
2  
Any ideas? Not without an example or some code. – j08691 Oct 24 '12 at 14:26
reference the stylesheet(s) on the page calling the dialog? – Forty-Two Oct 24 '12 at 14:27

1 Answer

up vote 0 down vote accepted

jquery-ui uses it's own style sheets contained in the content/themes folder of your project. To make changes to the jquery-ui widgets, you need to make changes to these style sheets and not your site.css file. You can also download pre-made styles for the query-ui widgets by going to www.jqueryui.com

Specifically, there should be a jquery.ui.dialog.css file under the base folder in the themes directory.

Edit: http://jqueryui.com/themeroller/

You can also make themes at the jqueryui website as well as download pre-made ones.

Hope this helps.

share|improve this answer
Thanks for you help Tommy. I should have mentioned this earlier, but the elements that do not get the css styles that I defined are basic things like the text size for TH, TD, H1, H2 elements for example. I also have a jquery Datatable in my dialog and the text size is different than it is in the other jquery Datatable that is not in the jquery ui dialog. Should I copy the style elements from my Site.css file that I want inside the jquery.ui.dialog.css file? – blakthorn Oct 24 '12 at 15:21
If it pertains directly to a jquery-ui widget, then yes it should be in the jquery.ui.dialog.css. It should also be noted that there are some styles in the jquery-ui.css that might also have to be looked at in order to achieve your final desired look. I suggest the theme roller on the jquery site that I linked to above because you don't have to mess with sorting out the jquery css files and what does what. You just make the changes visually on their site and then just download and replace your jquery css in your project. – Tommy Dugger Oct 24 '12 at 15:33
Also, the elements that have nothing to do with the jquery widget. How are you applying styles to them? Are you using a class name? An id? Or are you just referencing the tag name like this, table th? – Tommy Dugger Oct 24 '12 at 15:41
Thanks a lot Tommy, you put me on the right path and I found the solution to my problem thanks to you. – blakthorn Nov 6 '12 at 16:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.