zachvaldez
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
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
Which buttons do you mean? the arrows? The date boxes?
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 :(
It's pretty small as it is - any smaller and it'll be illegible :(
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.
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.
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.
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; }
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; }
ASKER
did a firebug and its pointing to
div class='ui-datepicker-calen dar'
div class='ui-datepicker-calen
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?
Can you explain (maybe with a link to your site) exactly what you are trying to resize?
ASKER
here's what I place on my css
.ui-datepicker
{
font-size:xx-small;width:1 7em;height :29em;bord er:.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?
.ui-datepicker
{
font-size:xx-small;width:1
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 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.
ASKER
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
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?
<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?
ASKER
My input are asp.net controls (textboxes).
ASKER
Can I use this function and define the size?
$(document).ready(funtion( ){
$(".datepicker").datepicke r();})
$(document).ready(funtion(
$(".datepicker").datepicke
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.