All geek questions in one place

How to make this jQueryUI button be the same size as the button created using custom CSS style?

There are two buttons here:

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

  • The first myStyle uses two custom CSS styles: mybutton and mywidth .
  • The second jqueryui button has styles defined by the jQuery stylesheet user interface, and then the button is called in the JavaScript section with:

:

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

You will notice two problems here: Run the sample.

(1) I need the jQuery button to always be the same width and height as the same button defined using the .mybutton style. However, at startup (in Chrome), the myStyle button myStyle 73x42 , and the jqueryui button jqueryui 67x42 . >. How can I guarantee that a jQuery user interface button will always be displayed with the same dimensions as buttons using a user-style ( .mybutton )?

(2) Another important problem is that text = false specified in the jQuery user interface button definition, but the button text is displayed.

+4
source share
2 answers

Both buttons have dynamic widths, basically that's it. They have a 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 width on both.

+2
source

If you cannot achieve the desired effect using ThemeRoller , you can always customize jQuery CSS manually. You will probably find everything you need to know here:

You don’t need to use the default CSS that comes with the jQuery user interface if it doesn’t match your existing design or you already have styles for the buttons you are satisfied with. In the links above, you will see which CSS classes are used by jQuery UI buttons and other widgets. You can define these classes yourself.

+2
source

Source: https://habr.com/ru/post/1343480/

More articles:


All Articles