CODEWITHSUNDEEP
javascriptjqueryhtmlcssdatetime
user1765862
user1765862

Reputation: 14145

datetime picker messing input element with it's css

I have input element which is binded to jquery datetime picker control. Element is rendered in html like

<input id="DateFrom" class="form-control text-right" type="text" value="" name="DateFrom" data-val-date="The field Date From must be a date." data-val="true">

Datetime control like fine but I have problem which occures when datetime picker is clicked my input element is shrinked by its width and datetime icon is moved down by 29 px.

Looking in firebug on datetime picker click following is rendered inside dom

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" style="display:block; top:29px; ... "> ... </div>

So i tried to target this whole class and to remove top using css

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

but that changes nothing.

Upvotes: 0

Views: 694

Answers (1)

guest271314
guest271314

Reputation: 1

So i tried to target this whole class and to remove top using css

.bootstrap-datetimepicker-widget + .dropdown-menu + .usetwentyfour + .bottom {
    top: 0 !important;
}

selects .bootstrap-datetimepicker-widget -> adjacent sibling .dropdown-menu -> adjacent sibling -> .usetwentyfour -> adjacent sibling -> .bottom , not 

<div class="bootstrap-datetimepicker-widget dropdown-menu usetwentyfour bottom" 
  style="display:block; top:29px; ... "> ... </div>

You should be able to use selector 

div.bootstrap-datetimepicker-widget.dropdown-menu.usetwentyfour.bottom

or 

div.bootstrap-datetimepicker-widget

Upvotes: 1

Related Questions