CODEWITHSUNDEEP
csstwitter-bootstrapscrollbaroverflowbootstrap-modal
Getz
Getz

Reputation: 4053

Scrollbar on a specific div into bootstrap modal body

My modal-body has two div side by side, one of them must have a scrollbar if his content is too big for the modal. Unfortunately, the scrollbar appears on the modal-body, not on my div.

What I have:

enter image description here

What I want:

enter image description here

My panelGuest has the overflow-y to auto, I tried with 'scroll' instead but the scrollbar is shown but not available. I tried different values for overflow on the modal-body, in vain.

css:

#panelGuest{
    overflow-y:auto;
    overflow-x:hidden;
    width: 35%;
    float:left;
    border-right:solid #ff920a 2px;
    min-height:100px;
}

html:

 <div id="modalShareBody" class="modal-body">
        <div id="panelGuest" class="panel">
            The div where i want the y-scrollbar
        </div>
        <div id="panelDetail" class="panel">
        </div>
    </div>

Here a fiddle with the issue: http://jsfiddle.net/Ua2HM/2/

Upvotes: 7

Views: 37233

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362310

I think you need to make panelGuest position:relative, and set a specific height on the modalShareBody so that the panels can be 100%.

#panelGuest{
    position: relative;
    width: 35%;
    float:left;
    border-right:solid #ff920a 2px;
    min-height:100px;
    height: 100%;
    overflow: auto;
}

Here is the updated fiddle: http://jsfiddle.net/skelly/Ua2HM/5/

Upvotes: 1

imcconnell
imcconnell

Reputation: 844

I did it making the height of the modal a fixed value:

#modalShare {
    margin-left:-200px;
    height: 300px;
 }

@media (max-width: 767px) {
    #modalShare {
        width: auto;
        margin-left: auto;
    }
}

#modalShareBody {
    overflow:hidden;
}

#panelGuest{
    width: 35%;
    float:left;
    height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    border-right:solid #ff920a 2px;
}

#panelDetail{
    float:left;
    width: 60%;
}

Is that what you need?

Upvotes: 9

Related Questions