Geek Answers Handbook

Resizing BUTTONS via CSS

I use jquery mobile to create my buttons, and I have the CSS code below to change its design, but no matter what value I put in width and height, the button size does not change, but it relatively depends on the font size of the label. How can I change this to resize the button regardless of the font size of the tag?

$("#ui-1").css({'position':'absolute','left':'27.0px','top':'51.0px','width':'120.0px','height':'30.0px',}); $("#ui-1 .ui-btn-text").css({'font-family':'"Calibri","Arial","Sans Serif"','font-size':'0.75em','color':'black','text-align':'left','wordwrap':'normal','text-shadow':'1px 1px 1px #FFFFFF'});
+3
source share
3 answers

Live example:

JS:

 // For all buttons use something like this $('.ui-btn').css('width','50%'); // For individual buttons use something like this $('#theButton1').parent().css('width', '75%'); // Or this for HREF data-role buttons $('#hrefButton4').css('width', '45%');

UPDATE: (I think this is what you are looking for)

 // this changes the height for all buttons $('.ui-btn-text').css('font-size','50px'); // This changes the height for a single element $('#hrefButton3').children().children().css('font-size','30px');

HTML:

 <div data-role="page" id="home"> <div data-role="content"> <input type="button" id="theButton1" value="Press Me 1" /> <input type="button" id="theButton2" value="Press Me 2" /> <input type="button" id="theButton3" value="Press Me 3" /> <input type="button" id="theButton4" value="Press Me 4" /> <br /> <a href="#" data-role="button" id="hrefButton1">HREF Me 1</a> <a href="#" data-role="button" id="hrefButton2">HREF Me 2</a> <a href="#" data-role="button" id="hrefButton3">HREF Me 3</a> <a href="#" data-role="button" id="hrefButton4">HREF Me 4</a> </div> </div>
+7
source

Did a little test for you, maybe this will get you started.

http://jsfiddle.net/3EgrW/1/

only enter button and a little css

Update

An example is added when jQuery 1.6.2 works fine, and

http://jsfiddle.net/3EgrW/2/

+1
source

A button may be an inline element. Make it inline-block :

 display: inline-block;
0
source

More articles:


All Articles