Link to home
Start Free TrialLog in
Avatar of zachvaldez
zachvaldezFlag for United States of America

asked on

resizing buttons for jquery UI

The datepicker displays a calendar with 30 or 31 days which represent a month no. of days.
This is displayed with Individual buttons

Id like to reduce the size of the individual button.
I dont know what property is the button to change where the numbers are displayed
Avatar of Kyle Hamilton
Kyle Hamilton
Flag of United States of America image

Which buttons do you mean? the arrows? The date boxes?

User generated image
If you mean the date boxes, those are done with CSS.  You'll have to trawl through the CSS file and make the appropriate changes.

It's pretty small as it is - any smaller and it'll be illegible :(
Avatar of Chris Stanyon
The jQueryUI CSS is fairly complex so the styling for the datepicker comes from a lot of different rules. In the CSS file they all start with .ui-datepicker.

If you want to override them, it's probably a good idea to add new rules to your own stylesheet rather than editing the UI CSS file directly.

The easiest way to see which rules apply to which elements is to use the Firebug plugin with Firefox - you can click on any element on your page and Firebug will tell you which styles are applied and on what line of the CSS file.
Avatar of zachvaldez

ASKER

I wish I had that size and dimension which you just showed in the image.
I can't figure out why it displayed elongated when I implemented it.
Its's the date box what Im trying to adjust. By adjusting it, hopefully the entire size of the control will be shortened.
The date box isn't styled by the UI - it's a standard HTML input box, so will be styled either by your own CSS, or if none is set, then the browser's default. Add some CSS to your own stylesheet:

input[type=text] { width: 150px; border: 1px solid red; }

If you give your input an ID then you style that one specifically:

input#myID { width: 150px; border: 1px solid red; }
did a firebug and its pointing to

div class='ui-datepicker-calendar'
The ui-datepicker-calendar class is applied to the calendar - the days (Su, Mo, Tu etc) and the numbers (1,2,3,4 etc) - not the date box you click on to show the calandar - that's a standard HTML input box.

Can you explain (maybe with a link to your site) exactly what you are trying to resize?
here's what I place on my css

.ui-datepicker
{
   font-size:xx-small;width:17em;height:29em;border:.5em;
padding:.5em .5em 0 .8em; display:none }
This narrows the calendar bu is still elongated. Did'nt get the look as in the demo.

the date box you click on to show the calandar - that's a standard HTML input box.>>>
how would I address this and css to change it?
The datepicker that @kozaiwaniec showed earlier is how it's supposed to look if you don't mess with the CSS.

If yours doesn't look like that, then I'm guessing you have other problems in your code/css or you've made changes that override the original values. Make sure you are loading the correct jQueryUI CSS files and that all the images (icons etc) are in the right place. Also, I wouldn't recommend trying to override any of the jQueryUI styles at all.

To style the text-input box, read my previous posts - it's a standard HTML input, so use your own CSS to style it.
If I leave the css as is, the image is huge. BY adding  font:xx-small it significantly reduce the image but the calendar looked elongated.

bTW how is this implemented?

input#myID { width: 150px; border: 1px solid red; }

sorry not too good with css and just learning firebug
If you have an input with an ID of myID, like this:

<input type="text" name="datepicker" id="myID" value="" />

Then you can style it like so:

input#myID { width: 150px; border: 1px solid red; }

As to why your UI CSS isn't working properly, it could be a number of things. To give you specific pointers we'd need to see your site - do you have a link to where it can be viewed?
My input are asp.net controls (textboxes).
Can I use this function and define the size?

$(document).ready(funtion(){
  $(".datepicker").datepicker();})
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial