JQuery UI Dialog Styling - переполнение? - PullRequest
Новая
       15

JQuery UI Dialog Styling - переполнение?

3 голосов
/ 05 ноября 2010

Привет, стек, нужна помощь в оформлении диалоговых окон jQuery UI. Вы можете увидеть, что происходит здесь: http://img714.imageshack.us/i/jquerydialogstylingissu.png/.

Сообщение проверки и значок в верхнем левом углу обрезаются. Я думал, что это потому, что .ui-dialog имеет «переполнение: скрытый», но удаление, которое не имеет никакого эффекта (что я мог видеть). Может ли кто-нибудь предложить какие-либо предложения для правильного отображения?

HTML-код строки заголовка после прикрепления верхнего левого значка: 

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<img style="position: absolute; left: -28px; top: -25px; z-index: 2147483647;" src="/img/browser.png">
<span class="ui-dialog-title" id="ui-dialog-title-TaskEditWindow">Task Details</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span></a>
</div>

Редактировать (Спасибо Cubed Eye Studios):

Изменение .ui-dialog и .ui-dialog-content на «overflow: visible» исправляет это, однако вы потеряете автопрокрутку в области содержимого и можете получить неожиданные результаты для строки заголовка (при условии, что был Во-первых, причина скрытия переполнения в заголовках. Ничего другого не заметил.). Потеря автопрокрутки это большое дело. Любые предложения обойти это будет принята с благодарностью. Спасибо.

Дополнительный код: 

<div style="display: block; z-index: 1004; outline: 0px none; height: auto; width: auto; top: 157px; left: 756px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all  ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-StageEditWindow">
    <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
        <img style="position: absolute; left: -23px; top: -20px;" src="/img/browser.png">
        <span class="ui-dialog-title" id="ui-dialog-title-StageEditWindow">Stage Details</span>
        <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"><span class="ui-icon ui-icon-closethick">close</span></a>
    </div>
    <div style="width: auto; min-height: 50.8px; height: auto;" id="StageEditWindow" class="ui-dialog-content ui-widget-content">
        <div class="screens-container">
            <div id="DetailsScreen">
                <form id="StageEditForm" action="#" onsubmit="return false;">
                    <fieldset id="DetailsFieldSet">
                        <div>
                            <label class="label" for="StageName">Name:</label>
                            <input type="text" class="input required validation-failed" name="Name" id="StageName">
                            <label for="StageName" generated="true" class="validation-failed" style="position: absolute; top: -121.95px; left: 107.1px; opacity: 0; display: none;">This field is required.</label>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <div class="ui-dialog-buttonset">
            <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save</span></button>
        </div>
    </div>
</div>

Решение для всплывающей подсказки (только для этого конкретного плагина всплывающей подсказки)

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

function getCropping(el) {
    var w = $(el).closest('.ui-dialog-content');
    var right = w.offset().left + w.width();
    var bottom = w.offset().top + w.height();
    var toolTipRight = el.offset().left + el.width();
    var toolTipBottom = el.offset().top + el.height();

    return [
        el.offset().top <= w.offset().top,                      // top
        right <= toolTipRight,          // right
        bottom <= toolTipBottom,        // bottom
        w.offset().left >= el.offset().left                     // left
    ];
}

Ответы [ 2 ]

2 голосов
/ 05 ноября 2010

Для значка просто сделайте видимым переполнение в диалоговом окне. 

<div class="ui-dialog" style="overflow:visible">

Сообщение проверки похоже на z-index, вы можете опубликовать еще немного кода?

1 голос
/ 05 ноября 2010

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

<div class="ui-dialog" style="overflow:visible;">
   <div class="ui-dialog-title" style="position:relative; z-index:5">Title Bar</div>
   <div class="ui-dialog-content" style="position:relative; z-index:10">
      Content Here
      <div class="tooltip" style="position:absolute; top:-4px;">
           Tooltip Content
      </div>
   </div>
</div>

Я только что убедился, что z-индекс части содержимого больше, чем заголовка. Не уверен, если это поможет, но попробуйте. Также сделайте их обоих относительными, а не абсолютными.

...