4

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?

Improve this question

1 Answer 1

Reset to default
4

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Perfect Answer - with examples and links to documentation - couldn't ask for more! Thanks! I usually work on server side languages (Ruby/Python/PHP/Perl). This jQuery/CSS stuff kills me!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.