Menu
Here's the page in question: http://bit.ly/m5cyjx
There's hardly any code or styling. It seems that the jQuery UI elements (in this case - select menu & button) are much too large. By default they should be quite small, not much higher than the max height of this sentence.
I've taken the jQuery UI CSS straight from their website, and I have similarly taken the jQuery select menu CSS from that project creator's website. Even with the default code, there is no change in the problem.
Any help?
Edit Also, there are no arrows on the right of the select menu, as there should be by default. Take a look at the project page: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
773
Yeah. I don't get why this is the default in JQuery UI. I don't think anyone wants buttons that big.
Here's how I solve it. Add this to the <head> of the html file.
<style type="text/css">
/* make default button size sane */
.ui-button-text {
font-size: .6em;
}
</style>
This is because of the following styling (style.css, line #10):
#main {
margin-top: 25px;
text-align: center;
font-size: 25px;
}
You have very big size for font in #main, and because jQuery UI correctly inherits other styles, the buttons are also big.
Change the above snippet into the following and it will look better (at least buttons):
#main {
margin-top: 25px;
text-align: center;
font-size: 10px;
}
I found that in there UI pages they have this css code:
body { font-size: 62.5%; }
so they are heavily scaling their font size down. Putting this in your page could solve the issue, it worked for me.
21
The two css rules controlling the sizes are
Line 424 of jquery-ui.css
input.ui-button {
padding: .4em 1em;
}
and Line 59 of jquery-ui.css
.ui-widget {
font-family: Segoe UI, Arial, sans-serif;
font-size: 1.1em;
}
Adjust the padding and font-size until it looks how you want it to look.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
