CODEWITHSUNDEEP
cssjquery-uijquery-ui-dialog
pirhac
pirhac

Reputation: 927

How to stop jQuery-ui from adding classes to my button

I have a very small space for a button. I successfully created the button just how I need it. It has the following classes: class="btn btn-default (from Twitter's Bootstrap).

I then added an onclick dialog event to the button with jQuery-ui (see: http://jqueryui.com/dialog/#modal-form). Now my button has become LARGER than before breaking the layout. When I look at the button with firebug I see that jQuery-ui added several classes to my button "without asking" it looks like: class="btn btn-default ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"

How can I keep the jQuery-ui dialog onclick event, but NOT have it add all those additional CSS classes to my button?

Upvotes: 4

Views: 1626

Answers (1)

Runcorn
Runcorn

Reputation: 5224

I presume you are using the same source code provided in the Dialog|jQuery UI sample page.

If yes, The issue you mentioned was caused by this line of code $( "#create-user" ).button() and it is a part of jqueryUI Button, see documentation here.

So, Remove that initialization there and the problem will be solved.

See a demo regarding the similar implementation.

Moreover, If you want to implement custom CSS for button inside the dialog you should either modify the jqueryUI CSS or add a class to mold the design as needed.

Upvotes: 4

Related Questions