Bootstrap 3 Modal - How to fill remaining body content with div without overlapping parent?

Question

I am working on location picker inside modal popup using Bootstrap3 CSS and JQuery location picker. Normally Bootstrap3's modal body size expands if content needs it.

What I need to do is to force modal to have relative to screen size because initial DOM content is empty and is filled via JQuery (Google maps initialization).

The problem is, that when setting relevant divs to have style= height:100%, body is overlapping its parent with the exact height of its sibling modal headers div.

How to prevent such behaviour and make modal body fill free space and not overlap parent component?

Here is working example https://jsfiddle.net/qfqjq82r/

It is not clear what you are trying. I guess, you want to reduce the height of the dialog depending on the screen size? — Ganesh Kumar, Nov 20 '15 at 10:03
@GaneshKumar I want to make dialog to be responsive. About 90% height. And now I need the red box to take all space that it can from its parent div (modal-content) and not overlap it like it does now — Antoniossss, Nov 20 '15 at 10:07
But the parent is not having any space left now, there is no available space. — Ganesh Kumar, Nov 20 '15 at 10:12
Have a look at this answer: http://stackoverflow.com/a/23504289/1113196 — Ganesh Kumar, Nov 20 '15 at 10:21

score 0 · Accepted Answer · answered Nov 20 '15 at 10:55

Ok after some consulting I have found the workaround/answer. The trick was to threat divs like table and table rows. After adding some additional styling, dialog looks exactly like it should.

https://jsfiddle.net/qfqjq82r/7/

And the css:

#location-picker .modal-content {
    display: table;
    width: 100%;
}

#location-picker .modal-dialog{
    width: 80%;
    height: 85%;
}

#location-picker .modal-body{
    height: 100%;
    display: table-row;
    width: 100%;
}
#location-picker .row{
    padding:15px;
}
.full-height{
    height: 100%;
}

Bootstrap 3 Modal - How to fill remaining body content with div without overlapping parent?

1 Answers1