CODEWITHSUNDEEP
jquerycssjquery-ui
Thierry Roy
Thierry Roy

Reputation: 8512

How to apply CSS theme to only a specific jQuery-UI element?

I have a web site already build with my own CSS theme. I'm using jQuery UI "tabs" widget but no CSS from jQuery-UI.

Now, I'm trying to add the "Date Picker" widget in one of my page. It would be great if I could reuse jQuery-UI default theme which is just fine.

The problem is that the date picker theme is also applied to my tabs CSS. For example the "ui-widget" css properties is applied to both date picker and tabs elements.

I can't seem to find a way to apply the css properties to only the date picker. I can't see a "super selector" that only applies to the date picker DIV.

What would be the best way to handle this?

[EDIT] The datepicker widget is really the problem. I cannot apply CSS style specific to it. Here is the starting code of the DIV that get pops up:

<div style="position: absolute; top: 300.4px; left: 149px; display: block;" id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-helper-hidden-accessible"><div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">

As such, I cannot add a super selector. What would be great would be that the date picker widget supports CSS scope. But it does not. I'm stuck manually editing the jQuery CSS file.

The Date Picker is currently being refactored. Hopefully the new code will address this issue.

Upvotes: 12

Views: 15206

Answers (7)

Doc Kodam
Doc Kodam

Reputation: 781

This works for me

$("#ui-datepicker-div").wrap("<div class='Your-CSS-Scope-Class'></div>");

Upvotes: 0

Glenn Lawrence
Glenn Lawrence

Reputation: 3063

Simply adding a css class to the datepicker div didn't work for me, I had to create another div around it like so:

$("#ui-datepicker-div").wrap('<div class="CSS-Scope-Class" />');

Upvotes: 1

Vishal
Vishal

Reputation: 11

Try: $('#cmsContent').css('margin', '0');

Upvotes: 1

Ryan
Ryan

Reputation: 91

$(window).load(function() {
   $('#ui-datepicker-div').addClass('CSS-Scope-Class');
});

The .addClass() jQuery function will add the necessary class to the datepicker for it to be picked up by the themed stylesheet.

I had to attach to the window's load event rather than the document's ready event because the datepicker had not been inserted by then.

Note: There will be a small delay between the time the datepicker is added to the DOM and the new class applied, which means the datepicker may appear unstyled while the page is finishing loading.

Upvotes: 8

Jeremy French
Jeremy French

Reputation: 12157

I could be missing something but couldn't you just add a class to your date picker object and select on that?

Upvotes: 1

Shaun Humphries
Shaun Humphries

Reputation: 1035

I had the same problem with the datepicker and the accordion. I wanted the new styling of the datepicker but didn't want it for the accordion. I took the easy way out, I copied the relevant parts of ui.theme.css and added .ui-datepicker in front of all the styles. This targets just the datepicker and leaves all other UI plugins alone.

I am not sure if it was the best way but it worked for my purposes.

Upvotes: 1

Chad Grant
Chad Grant

Reputation: 45382

You can customize your theme with the theme roller here http://jqueryui.com/themeroller/

Find the item you want to style with Firebug's inspect DOM feature to target the class you want to select.

Upvotes: 4

Related Questions