[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 322
  • Last Modified:

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
0
zachvaldez
Asked:
zachvaldez
  • 6
  • 6
  • 2
1 Solution
 
Kyle HamiltonData ScientistCommented:
Which buttons do you mean? the arrows? The date boxes?

datepicker
0
 
Kyle HamiltonData ScientistCommented:
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 :(
0
 
Chris StanyonCommented:
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.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
zachvaldezAuthor Commented:
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.
0
 
Chris StanyonCommented:
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; }
0
 
zachvaldezAuthor Commented:
did a firebug and its pointing to

div class='ui-datepicker-calendar'
0
 
Chris StanyonCommented:
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?
0
 
zachvaldezAuthor Commented:
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?
0
 
Chris StanyonCommented:
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.
0
 
zachvaldezAuthor Commented:
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
0
 
Chris StanyonCommented:
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?
0
 
zachvaldezAuthor Commented:
My input are asp.net controls (textboxes).
0
 
zachvaldezAuthor Commented:
Can I use this function and define the size?

$(document).ready(funtion(){
  $(".datepicker").datepicker();})
0
 
Chris StanyonCommented:
ASP.NET is server side code - once viewed in a browser they become standard HTML text boxes, so you style them as I've already explained (CSS)
Can I use this function and define the size?
No! It's styled using CSS - not jQuery
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 6
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now