CSS-фон не растягивается с содержимым модального поля - PullRequest
Новая
       217

CSS-фон не растягивается с содержимым модального поля

1 голос
/ 15 декабря 2009

Я изменил файл CSS для модального окна входа / всплывающего окна. Проблема заключалась в том, что когда я использовал форму входа, у меня были полосы прокрутки внизу и справа. Мне пришла в голову идея растянуть диалог входа в систему, чтобы он стал шире и весомее. Проблема в том, что фон не растягивается с новыми размерами.

Высота и ширина изначально были 100% 

#sbox-content
{
    clear:                  both;
    overflow:               auto;
    background-color:       #fff;
    height:                 130%;
    width:                  160%;
}

Это полный файл CSS, может кто-нибудь объяснить мне, что и где редактировать, чтобы сделать фон, соответствовать новым измерениям? Может быть, есть лучшее решение без необходимости устанавливать исходные 100% размеры на 130% и 160% 

.body-overlayed embed, .body-overlayed object, .body-overlayed select
{
    visibility:             hidden;
}

#sbox-window embed, #sbox-window object, #sbox-window select
{
    visibility:             visible;
}

#sbox-overlay
{
    position:               absolute;
    background-color:       #FFFFFF;
}

#sbox-window
{
    position:               absolute;
    background-color:       #FF7400;
    text-align:             left;
    overflow:               visible;
    padding:                5px;
    -moz-border-radius:     3px;
}

* html #sbox-window
{
    top: 50% !important;
    left: 50% !important;
}

#sbox-btn-close
{
    position:               absolute;
    width:                  30px;
    height:                 30px;
    right:                  -120px;
    top:                    -15px;
    background:             url(../images/closebox.png) no-repeat top left;
    border:                 none;
}

.sbox-loading #sbox-content
{
    background-image:       url(../images/spinner.gif);
    background-repeat:      no-repeat;
    background-position:    center;
}

#sbox-content
{
    clear:                  both;
    overflow:               auto;
    background-color:       #fff;
    height:                 130%;
    width:                  160%;
}

.sbox-content-image#sbox-content
{
    overflow:               visible;
}

#sbox-image
{
    display:                block;
}

.sbox-content-image img
{
    display:                block;
}

.sbox-content-iframe#sbox-content
{
    overflow:               visible;
}

1 Ответ

0 голосов
/ 15 декабря 2009

Я не уверен Я понимаю вопрос, но, возможно, вам просто нужно: 

#sbox-content
{
    clear:              both;
    overflow:           hidden;
    background-color:   #fff;
    height:             auto;
    width:              auto;
}

Не могли бы вы уточнить с рабочим тест-кейсом онлайн?

EDIT

Спасибо за разъяснения.

Кажется, вам следует увеличить размер модального окна при вызове: 

$("#sample").modal({
    minHeight:400,
    minWidth: 600
});
...