views:

224

answers:

1

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?

+1  A: 

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.

rickp
This did not work unfortunately. The small-button class is hanging off the button element and not overwriting the inner span.
chum of chance
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