Элементы управления не получат соответствующие размеры на вкладке jQuery - PullRequest
Новая
       16

Элементы управления не получат соответствующие размеры на вкладке jQuery

4 голосов
/ 22 декабря 2011

Я использую ui-вкладки jQuery.Если я открою вкладку, которая была закрыта при загрузке страницы, элементы управления на этой вкладке не будут иметь всю ширину вкладки.Это связано с тем, что закрытые вкладки получают класс ui-tabs-hide, и для него установлено значение none.

Есть ли простой способ справиться с этим?Я уже пытался использовать видимость скрытый вместо отображения ни одного, но это приведет к тому, что мои вкладки будут скрыты друг от друга.

Ответы [ 5 ]

7 голосов
/ 22 декабря 2011

Попробуйте отобразить содержимое ваших вкладок (или инициализировать элементы управления в них), когда они отображаются в первый раз. Вы можете использовать событие "show" для этого.

3 голосов
/ 11 января 2012

Я не могу воспроизвести упомянутое поведение на jsfiddle.net / zTBMG / 1 / .На изначально скрытой вкладке class установлено значение ui-tabs-hide, как и в вопросе.

И индикатор выполнения, и виджет кнопки на скрытой вкладке отображаются очень хорошо.

В терминахрешения убедитесь, что ширина элементов установлена ​​с использованием только CSS.Если ширина установлена ​​с помощью width:100%, браузер обязательно выполнит правильную перекомпоновку.Если вы используете фиксированные значения, которые являются результатом выполнения JavaScript, вам нужно будет вручную реагировать на перекомпоновки.

Если проблема не устраняется, отключите инициализацию вкладок, временно удалите класс ui-tabs-hide и убедитесь, что ваш макетправильный.Используйте инструмент, такой как Firebug, и проверьте, чтобы макет / метрики элемента получили их значения там, где вы ожидаете.Убедитесь, что дополнительные поля или отступы не заданы.

Примечание. Пример кода в вопросе действительно увеличивает вероятность получения полезных ответов.

3 голосов
/ 10 января 2012

Мне не хватает представителя, чтобы оставить комментарий, но здесь есть 2 идеи.

1) Установите ширину каждого из ваших div'ов равной ширине.

2) Вы пытались динамически загружать каждую вкладку с помощью ajaxOptions?

Мне удалось заставить мою страницу работать, используя опцию 1.

1 голос
/ 22 февраля 2012

У меня была такая же проблема ширины со скрытыми элементами.Попробуйте установить размер в CSS, прежде чем скрыть его.Затем сразу же скрыть это в том же файле CSS.Таким образом, размер предмета уже определен, прежде чем вы его спрячете или покажете позже.Это сработало.

1 голос
/ 12 января 2012

Я регулярно использую вкладки jqueryui. Чтобы убедиться, что вкладки отображаются с одинаковой шириной и что все дочерние элементы управления отображаются с правильной шириной, я просто добавляю класс 'ui-widget-content' во все элементы div, входящие в состав вкладки, или в div, содержащий дочерний элемент. управления. Пример ниже: 

<div class="tabs ui-widget-content ui-corner-all">
    <ul>
        <li><a href="#divTools">Tools</a></li>
        <li><a href="#divNotices">Notices</a></li>
    </ul>
    <div id="divTools">
        <div id="divStatus" class="ui-widget-content ui-corner-all">
        </div>
        <div id="divUpdateStatusDialog" class="dialog">
        </div>
    </div>
    <div id="divNotices">
        <div class="ui-widget-content ui-corner-all">
        </div>
    </div>
</div>

Кроме того, если вы имеете в виду динамические элементы управления, которые отображаются при их инициализации, то вам нужно скрыть вкладки за кадром влево вместо использования display: none. Подробнее см. http://jqueryui.com/demos/tabs/.

Надеюсь, это поможет,

Пит

...