Элементы пользовательского интерфейса jQuery слишком велики

Здесь страница: http://bit.ly/m5cyjx

Вряд ли какой-либо код или стиль. Кажется, что элементы пользовательского интерфейса jQuery (в данном случае - выберите меню и кнопку) слишком велики. По умолчанию они должны быть довольно маленькими, не намного превышающими максимальную высоту этого предложения.

Я взял jQuery UI CSS прямо со своего веб-сайта, и я аналогичным образом взял меню выбора jQuery CSS с веб-сайта создателя проекта. Даже с кодом по умолчанию в этой проблеме нет изменений.

Любая помощь?

Изменить Кроме того, справа от меню выбора нет стрелок, поскольку по умолчанию это должно быть. Взгляните на страницу проекта: http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

Ответ 1

Это связано с следующим стилем (style.css, line # 10):

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 25px;
}

У вас очень большой размер шрифта в #main, и поскольку пользовательский интерфейс jQuery правильно наследует другие стили, кнопки также большие.

Измените приведенный выше фрагмент следующим образом и он будет выглядеть лучше (по крайней мере, кнопки):

#main {
    margin-top: 25px;
    text-align: center;
    font-size: 10px;
}

Ответ 2

Да. Я не понимаю, почему это значение по умолчанию в пользовательском интерфейсе JQuery. Я не думаю, что кто-то хочет большие кнопки.

Вот как я его решаю. Добавьте это в <head> файла html.

<style type="text/css">
    /* make default button size sane */
    .ui-button-text {
        font-size: .6em;
    }
</style>

Ответ 3

Я обнаружил, что на страницах пользовательского интерфейса у них есть этот код css:

body { размер шрифта: 62,5%; }

поэтому они сильно уменьшают размер шрифта. Включение этого в вашу страницу могло решить проблему, это сработало для меня.

Ответ 4

Двумя правилами css, контролирующими размеры, являются

Строка 424 jquery-ui.css

input.ui-button {
    padding: .4em 1em;
}

и строка 59 jquery-ui.css

.ui-widget {
    font-family: Segoe UI, Arial, sans-serif;
    font-size: 1.1em;
}

Отрегулируйте отступы и размер шрифта, пока он не посмотрит, как вы хотите, чтобы он выглядел.

Ответ 5

удалить класс ui-widget.

Я думаю, что шаблон

<div class="ui-widget">
    <div class="ui-widget-header">
    </div>

    <div class="ui-widget-content">
    //your button could go here 
        <div class="ui-button">click me</div>
    </div>
</div>

Ответ 6

Мне просто пришлось споткнуться об этом, но попробуйте добавить html DOCTYPE к вашему документу

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

перед тем, как открыть html-тег.

Ответ 7

@Tadeck у меня была аналогичная проблема, и изменение размера шрифта сделало трюк:) спасибо!

также, прежде чем я прочитал это, я пытался увидеть, изменили ли размеры шрифта внутреннего содержимого, но по причинам, описанным ниже, этого не произошло. (так что не делайте то, что я сделал!= P)

script, который вызывает функцию вкладок jquery, чтобы сделать вкладки

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

разметка script необходимо создать вкладки

<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>

получается установка стилей inline для div внутри каждой вкладки div, не меняющая размер вкладок. мне пришлось изменить размер шрифта для класса .ui-widget в файле css, который был сгенерирован из темы jQuery UI, которую я выполнил. и изменение таблицы стилей интерфейса действительно не требуется, поскольку вы можете установить размер шрифта на сайте для ролика jQuery, прежде чем загружать свою собственную тему. Я просто забыл это сделать. я сделаю это до одного из моих самых дерзких моментов.

[edit] это явно не для кнопки пользовательского интерфейса, но аналогичная концепция и проблемы применяются

Ответ 8

У меня была эта проблема.. мои элементы управления прядильщиками были уродливы, огромны и выложены в горизонтальном, а не в вертикальном положении...

Мне нужно посмотреть на мой мастерский html файл (на самом деле это файл с бритвой MVC) и заметил, что мне нужно включить /themes/base/jquery.ui.spinner.css

Теперь мои прядильщики отлично смотрятся!

Ответ 9

Я пробовал все остальные ответы, но никто, похоже, не работал должным образом. Некоторые ничего не меняли, а некоторые имели побочные эффекты (например, все уменьшалось).

Это, наконец, сделало трюк:

.ui-widget
{
	font-size: 75%;
}