CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui-datepicker
Craig Howell
Craig Howell

Reputation: 1184

datepicker.ui header box too large

I am scratching my head on this one and I don't really know what code to show you as I don't have any code that directly effects this input but I will put anything I can think of.

I have a text input on an html form that is utilizing jquery datepicker. I have seen this in use and it looks and works great but for some reason the top bar on my datepicker is WAY too big. See normal version on the left and what is showing up for my program on the right:

Normal What I get

HTML:

<input title="The last day the individual received a service" type="text" class="datepicker frm-field" id="last-service-date" name="last-service-date"/>

CSS:

.frm-field {
    display: block;
    background-color: #b6cce2;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1pt solid black;
    font-size: 12pt;
    padding-left: 4pt;
    vertical-align: top;
    width: 100%;
}

div.ui-datepicker{
    font-size: 12px;
}

input, select {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

JQuery:

  $('.datepicker').datepicker({
    autoclose: true
  });

I have not altered any of the downloaded code I am just using it straight out of the box. I apologize for the lack of information but I honestly am not sure what else could be causing this issue...

Thanks for any assistance you can offer!

UPDATE

using the following css code that Hackerman provided the box changed but does not take the content with it:

CSS:

.ui-datepicker .ui-datepicker-header { 
    position: relative; 
    padding: .2em 0; 
    height: 30px !Important; 
}

Pic:

enter image description here

UPDATE:

New CSS code from Hackerman:

.ui-datepicker-month { 
    display: inline-block !Important; 
    width: 60px !Important; 
}

Pic of results:

enter image description here

Final Answer:

Here is the CSS that fixed it:

.ui-datepicker .ui-datepicker-header { 
    position: relative; 
    height: 22px !Important; 
}

.ui-datepicker-month { 
    display: inline-block !Important; 
}

.ui-datepicker-year { 
    display: inline-block !Important; 
}

Pic of rendered datepicker:

enter image description here

Thanks!!!!

Upvotes: 1

Views: 485

Answers (1)

Hackerman
Hackerman

Reputation: 12305

I was using this fiddle for testing, in order to know the right css classes to modify:

http://jsfiddle.net/robertrozas/Fa8Xx/3999/

This way i start making somes changes, first on:

.ui-datepicker .ui-datepicker-header { 
  position: relative; 
  padding: .2em 0; 
  height: 30px !Important; 
}

And later on:

.ui-datepicker-month { 
  display: inline-block !Important; 
  width: 60px !Important; 
}

I think the issue was caused due to css rules conflict between stylesheets.

Upvotes: 2

Related Questions