CODEWITHSUNDEEP
jquerycss
sTg
sTg

Reputation: 4434

Overriding JQuery UI CSS Property?

I am trying to override JQuery CSS property for datepicker, But it does not show any effect. I want to increase the width of month combobox inside datepicker.

I have overridden property of JQuery UI CSS by doing

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year {
width: 50% !important;
}

By default it is 49%. It does not seem to work. Please guide.

Upvotes: 0

Views: 841

Answers (2)

gaetanoM
gaetanoM

Reputation: 42054

You may use:

    #ui-datepicker-div  {
        width: 50%; !important;
    }

or:

    .ui-datepicker.ui-widget {
        width: 50%; !important;
    }

Or, to be more precise, in jQuery ready you may do:

$(function () {
  $( "#datepicker" ).datepicker().on('focus', function(e) {
    $( "#datepicker" ).datepicker('widget').width('90%');
  });
});
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<p>Date: <input type="text" id="datepicker"></p>

Using simply the stylesheet:

$(function () {
  $('#zzz').datepicker();
  $( "#datepicker" ).datepicker();
});
#ui-datepicker-div  {
  width: 90%; !important;
}
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>


<p>Date: <input type="text" id="datepicker"></p>
<p>Date: <input type="text" id="zzz"></p>

So, I suggest to use the first, because in that way you may set the width of a specific datepicker , not for all.

Whenever you open a datepicker, a new div element is added to the document. With jQuery 1.12 the id of this panel has always the name 'ui-datepicker-div'

Upvotes: 1

dgo
dgo

Reputation: 3947

There are a couple of things in could be. Your selector could be wrong, or not specific enough. If you copied the exact selector, double check that you copied the exact selector they used.

The order of your stylesheets could be wrong. Make sure that jquery.ui.css and theme files are getting loaded before yours.

It could be something else. I find the best way to debug things like this is in the styles panel in Chrome Developer Tools. Go to the tab that says computed; choose width; and click where it says width, it will bring you to the selector that created that rule. Uncheck the width rule and then see what width rule gets applied. Eventually you will uncheck all the applied width rules or find out which one is overriding yours.

You may also discover something else like - your rule isn't loaded at all. Maybe you are using a cached version of your stylesheet, etc.

This rule is for sure overridable - there is either a logic error or a typo somewhere, and you just need to find it.

Upvotes: 1

Related Questions