How to change the width and height of a jquery mobile datebox component

Question

I have to give a particular width and height for datebox component in my jquery mobile webpage.So I thought it can be done by defining width and height for the date input element.Unfortunately it did not work out.Any idea how to achieve this?.

Thanks in advance.

A sample code can be seen here - http://jsfiddle.net/na6Be/

Answer 1

The DateBox plugin doesn't currently support what you are after with a simple attribute in your markup. While theming is in the works (according to the documentation), the only current way that you can change the size of the elements that are dynamically created by the plugin is by replacing the CSS with your required dimensions.

However, there are quite a lot of classes used in the generated mark up. Inspect element will be your friend here. The first place to look will be the .ui-datebox-container class. This holds the default width of 280px. As the name suggests, this is just a container so simply changing this won't affect the contents of the DataBox. After a quick look, I would say all elements you are looking for are within a class beginning with "ui-datebox".

Good luck!