jQuery UI elements too large

user_361883 0
Viewed 15231

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/

jquery-ui css jquery
9 Answers

@Tadeck i was having a similar issue, and changing the font size did the trick :) thank you!

also, before i read this, i was trying to see if changing the font sizes of the inner content worked, but for reasons i describe below it did not. (so don't do what i did! =P)

script that calls the jquery tabs function to make the tabs

$(function() {
    $("#tabs").tabs();
});

markup the script needs to build the tabs

<div id="content-wrapper">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-main">Dashboard</a></li>
      <li><a href="#tabs-stuff"> Other Stuff </a></li>
    </ul>
    <div id="tabs-main"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
    <div id="tabs-stuff"> 
       <!-- where i put unformatted content, like headers and description paragraphs -->
       <div> formatted inner content here (for graphs/visual content/tables/etc) </div>
    </div>
 </div>
</div>

turns out setting the styles inline for divs inside each tab div is doesn't change the size of the tabs. i had to change the font size for the .ui-widget class in the css file that was generated from the jQuery UI theme i rolled. and changing the UI's stylesheet really isn't necessary since you can set the font sizes on the site for the jQuery theme roller before you download your custom theme. i just forgot to do that. i'll chalk that up to one of my more derpy moments.

[edit] this obviously wasn't for a UI button, but similar concept and issues apply

user_18403100
Related