Question

Hi Folks i’m new to JQuery

i want re size JQuery button
my code is

<input type="submit" id="Btn1" value="Login"/>

in script

 $(document).ready(function(){
           $("#Btn1").button();
   });

But i get large font and big button, i want that in small size through CSS.

Thanks in Advance

Answer 1

Jquery UI uses relative EM’s to size all of their elements. Without some cursory CSS to set the font-size globally in a Jquery UI project you will end up with massive buttons and large text across the majority of the UI’s widgets.

To fix this across all Jquery UI elements set the font-size absolutely on the body.

body {
    font-size:10pt; // or 12px
}

This will screw with all other font sizing you have on your site so use with caution when retro-coding something like this into your CSS.

Alternatively, you can isolate the highest level parent and declare an absolute font-size that is inherited by the buttons and then sized relatively by Jquery UI.

.button_container {
    font-size:10pt; // or 12px
}