Changing jQuery UI Button size?

Question

I've been using the jQuery UI button all over my page, however I haven't found a way around what seems to be a simple problem. I want some of my buttons to be smaller than the other, this 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 a <button class="small-button">Small button!</button> jQuery will place the text in a child span. Any font size given to the small-button class will be ignored.

There's got to be a way around this without hacking at how jQuery makes its buttons. Any ideas?

rickp · Accepted Answer · 2010-08-01T05:01:00.897

37

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

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

EDIT: try setting a CSS style directly on .ui-button-text to inherit:

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

This should also make the !important on the .small-button irrelevant.

edited Aug 01 '10 at 05:01

answered Aug 01 '10 at 03:15

rickp

854
8
10

This did not work unfortunately. The small-button class is hanging off the button element and not overwriting the inner span. – chum of chance Aug 01 '10 at 04:13
Have a look at my edit, that might help you out. It would be beneficial to see your full example in action (with all the CSS applied to it). Im going to gather that you're probably using a jQuery UI CSS file for the button, this could be solved by modifying that CSS directly to get your desired needs. – rickp Aug 01 '10 at 05:08

score 14 · Answer 2 · answered Mar 04 '11 at 16:30

14

This helped decrease the height of the button for me (Smoothness theme default is line-height of 1.4):

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

answered Mar 04 '11 at 16:30

Tim

141
1
2

Dean · Answer 3 · 2013-01-16T00:33:08.777

Here is what I use in my websites to setup the font-sizes so that my button sizes are the same as on the jQuery UI website. This works because it's exactly how the jQuery UI website does it!

/* 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 the font-size properties like that for the body element, setting the font-size for everything else becomes trivial as 100% = 10px.

Just watch out for the cascading effect when using percentages - a child element's 100% will be equal to the parent element's font-size.

Derek Adair · Answer 4 · 2011-08-24T23:06:02.430

You can create different sized buttons by modifying the padding of the span element that is contained within the markup jQuery generates, as Tim suggests.

This markup/JavaScript...

$(document).ready(function(){
    $("button").button();
});

<button id="some-id" class="some-class">Some Button</button>

Results in this transformed 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 most certainly includes the id and class tags which were originally supplied. You can modify the size of your buttons by adding more padding to the span.ui-button-text element.

Like So..

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

score 3 · Answer 5 · edited Mar 27 '11 at 12:13

3

Just change the button font-size ;).

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

Now add a jquery script to the button

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

Good Luck. ;)

edited Mar 27 '11 at 12:13

Shadow The GPT Wizard

66,030
26
140
208

answered Mar 27 '11 at 12:10

xxx

31
1

When using unique ID of element, the `input:submit` selector is just unneeded overhead.. – Shadow The GPT Wizard Mar 27 '11 at 12:14

score 3 · Answer 6 · answered Jan 09 '12 at 23:21

3

I used a combination of two suggestions above. It's pretty easy to tweak the UI just the way I like it.

To page's stylesheet add:

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

answered Jan 09 '12 at 23:21

TrophyGeek

5,902
2
36
33

score 1 · Answer 7 · answered Sep 24 '14 at 22:17

1

I did this and it works fine.

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

answered Sep 24 '14 at 22:17

KungFuMonkey

91
1
3

1

I don't think that will work. I tried it with jQuery 1.11.2 and it failed. This should be the correct way: $( "button" ).button().css( "font-size", "0.8em" ) ; – Justin H. Dec 12 '14 at 15:51

score 0 · Answer 8 · answered Apr 22 '13 at 21:15

My solution needed to work across the new menu items as well

The first to select the matching elements for both menu and button

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

And the second as above to force inheiritance

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

score 0 · Answer 9 · answered May 20 '13 at 06:47

0

Use jQuery at runtime, without modifying CSS. This gives you a lot more flexibility.

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

answered May 20 '13 at 06:47

Dmitri K

1

score 0 · Answer 10 · answered May 31 '16 at 17:21

0

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

and my css:

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

answered May 31 '16 at 17:21

Marinha do Nascimento

778
7
12

Changing jQuery UI Button size?

10 Answers10

Linked