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

css, jquery-ui, jquery-ui-dialog

Solution

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.

Problem

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?

Original source