CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
Wilkinson
Wilkinson

Reputation: 41

How to get this jQueryUI button to be the same size as a button created with a custom CSS style?

There are two buttons here:

http://jsfiddle.net/fintiblick/g48EL/3/

  1. The first myStyle uses two custom CSS styles: mybutton and mywidth.
  2. The second button jqueryui has styles defined by the jQuery UI stylesheet and then the button is invoked in the JavaScript section using:

:

jQuery("#dosubmit2").button(
{
    icons: 
    {
        secondary: "ui-icon-search"
    },
    text: false
});

You will notice two problems here if you "Run" the sample.

(1) I need the jQuery button to always be the exact same width and height as the same button defined using the .mybutton style. When run (in Chrome) however, the mystyle button is 73x42 and the jqueryui button is 67x42. How can I ensure that the jQuery UI button always appears with the same size dimensions as buttons using the custom style (.mybutton)?

(2) Another less important issue has to do with the fact that the jQuery UI button definition says text = false and yet the button text is showing despite that.

Upvotes: 4

Views: 1113

Answers (2)

rsp
rsp

Reputation: 111394

If you can't achieve your desired effect using the ThemeRoller then you can always customize the jQuery UI CSS manually. You will probably find all you need to know here:

You don't have to use any default CSS that comes with jQuery UI if it doesn't fit your existing design or if you already have styles for buttons that you are satisfied with. The links above will show you which CSS classes are used by jQuery UI buttons and other widgets. You can define those classes yourself.

Upvotes: 2

kapa
kapa

Reputation: 78721

Both buttons have dynamic width, basically that is all. They have dynamic width, so their width is based on their content:

  • they have different content
  • they have a different font-family

If you want them to be the same size, specify a width on both.

Upvotes: 2

Related Questions