How to change this specific css class inside div, in Date Picker jquery-ui?

Question

In the calendar Date Picker, I have this DIV

<div id="ui-datepicker-div" class="ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-2 ui-datepicker-multi">

I want to change css class for this class:

ui-datepicker ui-widget ui-widget-content ui-helper-clearfix ui-corner-all ui-datepicker-multi-2 ui-datepicker-multi

I used like this, but it doesn't work:

.ui-datepicker .ui-widget .ui-widget-content .ui-helper-clearfix .ui-corner-all .ui-datepicker-multi .ui-datepicker-multi-2 {

position: absolute;
top: 38px;
left: 44px;
z-index: 1;
display: block;
width: 55em;
}

How to change css for that class? Is my css incorrect? there's something wrong with this DIV, because one style automatically will be added into the div. I checked with Inspect element, I saw there's element inline, but there's non. that's why the CSS won't affect into it, How to solve it?

How to remove auto style into this div?

I need someone to help me for this following JavaScript code, How to set width to width: "55em" all because of this following code CSS won't affect into that DIV

        // determine sizing offscreen
    inst.dpDiv.css( { position: "absolute", display: "block", top: "-1000px", width: "55em" } );
    $.datepicker._updateDatepicker( inst );

    // fix width for dynamic number of date pickers
    // and adjust position before showing
    offset = $.datepicker._checkOffset( inst, offset, isFixed );
        inst.dpDiv.css( { position: ( $.datepicker._inDialog && $.blockUI ?
        "static" : ( isFixed ? "fixed" : "absolute" ) ), display: "none",
        left: offset.left + "px", top: offset.top + "px", width: "55em" } );    
    if ( !inst.inline ) {
        showAnim = $.datepicker._get( inst, "showAnim" );
        duration = $.datepicker._get( inst, "duration" );
        inst.dpDiv.css( "z-index", datepicker_getZindex( $( input ) ) + 1 );
        $.datepicker._datepickerShowing = true;

        if ( $.effects && $.effects.effect[ showAnim ] ) {
            inst.dpDiv.show( showAnim, $.datepicker._get( inst, "showOptions" ), duration );
        } else {
            inst.dpDiv[ showAnim || "show" ]( showAnim ? duration : null );
        }

        if ( $.datepicker._shouldFocusInput( inst ) ) {
            inst.input.trigger( "focus" );
        }

        $.datepicker._curInst = inst;
    }
},

Dryden Long · Accepted Answer · 2016-07-25 20:04:56Z

2

You need to not have the spaces in-between the classes. When you have the spaces, it will target each class as if it were a child of the one before it. Removing the spaces will target the elements that have all of those classes in one.

.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all.ui-datepicker-multi.ui-datepicker-multi-2 {
   position: absolute;
   top: 38px;
   left: 44px;
   z-index: 1;
   display: block;
   width: 70em;
}

EDIT: In order to override the inline styles, use JQuery's .css() function to set the style of the element you want. Something like this:

$('#ui-datepicker-div').css('width':'70em');

edited Jul 25, 2016 at 20:04

answered Jul 25, 2016 at 18:12

Dryden Long

10.2k2 gold badges38 silver badges48 bronze badges

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

4 Comments

Alexandr rechiardson Over a year ago

I did it but it doesn't work, there's something wrong with this DIV, because one style automatically will be added into the div. I checked with Inspect element, I saw there's element inline, but there's non. that's why the CSS won't affect into it, How to solve it?

Dryden Long Over a year ago

@Alexandrrechiardson If your problem is inline styles overriding your style sheet, then that's something that should be done in the JS function that creates the elements. It looks like you're using a library of some kind, so I would look into the documentation on how to change those styles.

Nathaniel Flick Over a year ago

Hi you need to have your style override occur after the jquery ui css is called. Is this the case?

Alexandr rechiardson Over a year ago

The problem is related to jquery-ui.js that's why that css will be added, I checked the file, I need to change JavaScript code which I don't know.

Collectives™ on Stack Overflow

How to change this specific css class inside div, in Date Picker jquery-ui?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related