Здесь страница: 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/
Это связано с следующим стилем (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;
}
Да. Я не понимаю, почему это значение по умолчанию в пользовательском интерфейсе JQuery. Я не думаю, что кто-то хочет большие кнопки.
Вот как я его решаю. Добавьте это в <head> файла html.
<style type="text/css">
/* make default button size sane */
.ui-button-text {
font-size: .6em;
}
</style>
Я обнаружил, что на страницах пользовательского интерфейса у них есть этот код css:
body { размер шрифта: 62,5%; }
поэтому они сильно уменьшают размер шрифта. Включение этого в вашу страницу могло решить проблему, это сработало для меня.
Двумя правилами 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;
}
Отрегулируйте отступы и размер шрифта, пока он не посмотрит, как вы хотите, чтобы он выглядел.
удалить класс 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>
Мне просто пришлось споткнуться об этом, но попробуйте добавить html DOCTYPE к вашему документу
<!DOCTYPE html>
<html>
<body>
</body>
</html>
перед тем, как открыть html-тег.
@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] это явно не для кнопки пользовательского интерфейса, но аналогичная концепция и проблемы применяются
У меня была эта проблема.. мои элементы управления прядильщиками были уродливы, огромны и выложены в горизонтальном, а не в вертикальном положении...
Мне нужно посмотреть на мой мастерский html файл (на самом деле это файл с бритвой MVC) и заметил, что мне нужно включить /themes/base/jquery.ui.spinner.css
Теперь мои прядильщики отлично смотрятся!
Я пробовал все остальные ответы, но никто, похоже, не работал должным образом. Некоторые ничего не меняли, а некоторые имели побочные эффекты (например, все уменьшалось).
Это, наконец, сделало трюк:
.ui-widget
{
font-size: 75%;
}