Resizing jQuery UI Button?

Question

I use the jQuery user interface button throughout my page, however I have not found a way around what seems like a simple problem. I want some of my buttons to be smaller than others, it should be as simple as setting the CSS of the button text to something like font: .8em; However, jQuery UI takes your DOM element and wraps it:

 <button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all"> <span class="ui-button-text">Button Label</span> </button> 

So, if I have <button class="small-button">Small button!</button> , jQuery will put the text in the child range. Any font size assigned to the small-button class will be ignored.

There should be a way around this without hacking, as jQuery does its buttons. Any ideas?

Answer 1

If it's a ui-button-text style with font-size directly, you can override it at a higher level by applying! important. For example:

 .small-button { font-size: .8em !important; } 

EDIT: try setting the CSS style directly to .ui-button-text for inheritance:

 .ui-button-text { font-size: inherit !important; } 

This should also make the essential for .small-button inconsequential.

Answer 2

This helped reduce the button height for me (the default smoothness theme is 1.4 line height):

 .ui-button .ui-button-text { line-height: 1.0; } 

Answer 3

Here is what I use on my websites to adjust the font sizes so that the button sizes are the same as on the jQuery UI website . This works because this is exactly what the jQuery UI website does!

 /* percentage to px scale (very simple) 80% = 8px 100% = 10px 120% = 12px 140% = 14px 180% = 18px 240% = 24px 260% = 26px */ body { font-family: Arial, Helvetica, sans-serif; font-size:10px; } 

By setting font size properties similar to this for the body element, setting the font size for everything else becomes trivial, like 100% = 10px.

Just watch for the cascading effect when using percentages: the child is 100% equal to the size of the parent.

Answer 4

You can create buttons of different sizes by changing the filling of the span element that is contained in the jQuery markup, as Tim shows.

This markup / javascript ...

 $(document).ready(function(){ $("button").button(); }); <button id="some-id" class="some-class">Some Button</button> 

The results of this modified markup ...

 <button class="some-class ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="some-id" role="button" aria-disabled="false"> <span class="ui-button-text">some button</span> </button> 

Which, of course, includes the id and class tags that were originally supplied. You can resize your buttons by adding more indentation to the span.ui-button-text element.

Like so ..

 button#some-id .ui-button-text { /* padding values here to your liking */ } 

Answer 5

Just change the font size of the button;).

 <asp:Button ID="btn2" runat="server" Text="Button" style="font-size:10px" /> 

Now add the jquery script to the button

  <script type="text/javascript" language="javascript"> $(document).ready(function () { $('input:submit, #btn2').button(); }); </script> 

Good luck .;)

Answer 6

I used a combination of the two sentences above. It's pretty easy to customize the UI the way I like it.

In the stylesheet add:

 .ui-button .ui-button-text { padding: 0px 11px 0px 21px !important; font-size: .72em !important; } 

Answer 7

My solution was to work with new menu items as well.

First select the appropriate items for the menu and button

 .menu>.ui-button-icon-only, .ui-button{ font-size:0.8em !important; } 

And the second, as stated above, to make carelessness

 .ui-button-text { font-size: inherit !important; } 

Answer 8

I did this and it works great.

 $( "button" ).button("font-size", "0.8em"); 

Answer 9

Use jQuery at runtime without changing CSS. This gives you great flexibility.

 $(function() { $("input[type=button]").css("font-size", "0.8em"); }); 

Answer 10

<input type="submit" value="Mostrar imágenes">

and my css:

 input[type="submit"] { color: #000; border: 0 none; cursor: pointer; height: 30px; width: 150px; }