Question

133

Changing jQuery UI Button size?

rated 0 times [ 138] [ 5] / answers: 1 / hits: 73952 / 14 Years ago, sun, august 1, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

caylasarinag

Add To Favorites

Follow

Total Points: 194

Total Questions: 107

Total Answers: 105

Location: Benin

Member since Sun, Jan 29, 2023

1 Year ago

answered 14 Years ago darennevina · Accepted 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.