CODEWITHSUNDEEP
jquerycssjquery-ui
Soatl
Soatl

Reputation: 10592

Changing the height of a jquery datepicker

I am trying to change the height of a datepicker I am using. I have been working through firebug and was able to change the width by editing the ui-datepicker class like so:

.ui-datepicker
{ 
    width: 12em;
    height: 12em;
}

The width works fine, but the height only changes the back of the calender, and not the cells so I end up with something like this: Notice the height of the cells compared to the background

Where the height of the datepicker background has changed, but the cells are the same. In the class .ui-datepicker table I tired to add a line of code height: 80%, but the height will not go lower then 100% (or at least any lower will not change the appearance of the datepicker). I have been looking through the css to try to find where the height is set, but cannot find it so far. Any suggestions?

Upvotes: 1

Views: 27931

Answers (12)

UDigi
UDigi

Reputation: 33

Change the padding!

.ui-datepicker td span, .ui-datepicker td a {
    padding: 10px 5px !important;
}

Upvotes: 0

Berat Emre Nebioglu
Berat Emre Nebioglu

Reputation: 49

I did it using the following code :

.ui-datepicker {
  width: 200px;
  height:200px;
}

Here is a small JSFiddle example where you can change width and height as your wish.

Upvotes: 0

oritadeu
oritadeu

Reputation: 1

I can't vote, then here is mine 

#dataAgenda2 .ui-widget { font-size: 0.8em !important; }

Upvotes: 0

Ashwini Verma
Ashwini Verma

Reputation: 7525

Since selected answer is already correct but it appears that height and width wasn't properly adjusted. In my case, below code worked perfectly.

#ui-datepicker-div { font-size:11px; }

DEMO

Upvotes: 1

Aman
Aman

Reputation: 26

If it is an inline datepicker,then there is a trick. Just give some id to datepicker .<div id="datepicker" ></div>. Now change the font-size of datepicker according to your need. It will automatically change the size of datepicker. css code: #datepicker{ font-size: 20px; }

Upvotes: 1

Arun Duth
Arun Duth

Reputation: 31

Following steps helped me.

  1. Open CSS file 'jquery-ui.css' from \Content\themes\base\
  2. Move to section 'jQuery UI Datepicker 1.8.7'
  3. Change Width and Height property for following items as per requirement .ui-datepicker .ui-datepicker table
    .ui-datepicker th
    .ui-datepicker td
    .ui-datepicker td span .ui-datepicker td a

Here is the modified UI http://arunduth.net/Images/JQueryDatePicker.png

Upvotes: 3

Hindu
Hindu

Reputation: 21

Do just this. Height would be taken care of automatically

.ui-datepicker {
    width: 12em;
    font-size:10pt;
}

Upvotes: 2

scottpetrovic
scottpetrovic

Reputation: 73

The date picker has a few different elements inside of it that affect the height. There is no good selector that I have found that scales the whole thing up.

You mention making the cells larger. For that, you can target the anchor tags inside of the date picker. 

.ui-datepicker td a
{    
  height: 1.4em;   
}

Doing something like that will make all of the cells bigger and the entire datepicker window will auto expand. Note that increasing the height this selector will not change the width. Trying to add a "width" property to this selector will create unwanted padding. You will have to do it how you originally were doing it.

.ui-datepicker
{ 
    width: 12em;
}

Upvotes: 3

Shakir
Shakir

Reputation: 21

Even smaller than the answer given:

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 0.7em; }

Change the font-size, everything changes

Upvotes: 2

ChrisThompson
ChrisThompson

Reputation: 2008

i got it smaller changing the following two lines. i changed width on the datepicker from 14 to 12em; and set the font to .7em.

.ui-datepicker { width: 12em; padding: .2em .2em 0; display: none; }
.ui-datepicker table {width: 100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; }

Upvotes: 6

Daff
Daff

Reputation: 44215

I think you have to specifically change the height of the table cells, e.g. like this:

.ui-datepicker td {
    height: 1em;
}

Which will also adjust the height of the sorrounding date picker.

Upvotes: 2

Adam
Adam

Reputation: 12650

Try reducing the line-height property of .ui-datepicker td. When you do that, you will probably have to fiddle around with padding and font-size to get the numbers to fit in the boxes, but I think line-height will do what you're looking for.

Upvotes: 0

Related Questions