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

Question

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.

Check out comments below. You can get around this with a 'hack' of wrap()-ing the created div with your own div that has the CSS scope applied to it. In the options for the datepicker: beforeShow: function () { $("#ui-datepicker-div").wrap("<div class='my-scope' />"); } — CodeMonkeyKing
– CodeMonkeyKing, Commented Jun 29, 2011 at 17:47

skywlkr · Accepted Answer · 2012-04-23 13:39:32Z

8

$(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.

edited Apr 23, 2012 at 13:39

skywlkr

1,4551 gold badge13 silver badges22 bronze badges

answered Apr 19, 2010 at 18:43

Ryan

911 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Halil Özgür Over a year ago

As for having to attach the event to load rather than ready: If you apply wrapping after setting up datepickers, ready should work too.

CodeMonkeyKing Over a year ago

I added the same code into the beforeShow event of the calendar widget and that solves the problem without depending on the window's load event since I'm dynamically showing the calendar after changing focus to an input field.

Gus Over a year ago

In my case I had used #idenifer as a scope, so I had to use $('#identifier').append($('#ui-datepicker-div').

Chad Grant · Accepted Answer · 2009-05-01 14:23:10Z

4

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.

answered May 1, 2009 at 14:23

Chad Grant

45.6k10 gold badges67 silver badges80 bronze badges

Comments

Shaun Humphries · Accepted Answer · 2009-05-01 14:45:51Z

1

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.

answered May 1, 2009 at 14:45

Shaun Humphries

1,0359 silver badges15 bronze badges

Comments

Jeremy French · Accepted Answer · 2009-05-01 15:21:52Z

1

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

answered May 1, 2009 at 15:21

Jeremy French

12.3k6 gold badges48 silver badges73 bronze badges

Comments

fish2000 · Accepted Answer · 2012-12-22 23:19:08Z

1

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

edited Dec 22, 2012 at 23:19

fish2000

4,4352 gold badges41 silver badges80 bronze badges

answered May 11, 2010 at 9:39

Vishal

111 bronze badge

Comments

Glenn Lawrence · Accepted Answer · 2013-09-05 08:05:32Z

1

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" />');

answered Sep 5, 2013 at 8:05

Glenn Lawrence

3,1033 gold badges34 silver badges38 bronze badges

Comments

Doc Kodam · Accepted Answer · 2014-12-15 15:37:23Z

0

This works for me

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

answered Dec 15, 2014 at 15:37

Doc Kodam

7916 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related