css background doesn't stretch with modal box content.

Question

Hello,

I have changed a css file for a modal login window/popup. The problem was that when I used the login form, I have some scrollbars at the under and on the right side. I came up with the idea to stretch the login dialog to make it all wider and heigher. The problem now is that the background doesn't stretch with the new dimentions.

The height and the width was originally 100%

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

This is the complete css file, can somebody explain me what and where to edit to make the background, fit the new dimentions? Maybe there is a better sollution without having to set the original 100% sizes to 130% and 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;
}

Answer 1

I'm not sure I understand the question, but perhaps you just need:

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

Could you clarify with a working test-case online?

EDIT

Thanks for clarifying.

Seems you should increase the size of the modal window when you call it:

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