chum of chance chum of chance - 6 months ago 47
jQuery Question

Changing jQuery UI Button size?

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?

Answer

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.