min-height not working for bootstrap modal window

Question

I tried to create a modal window having full height even if the content is small. I set css min-height:100% to .modal-dialog and tried various other options. But min-height is not working for modal window.

My requirement is:

Even if content is small modal window should be full screen

If content is huge modal window should have a scroll bar and should include all content.

apply both `height:100%` and `min-height:100%` – Suresh Ponnukalai May 20 '15 at 07:31 — Suresh Ponnukalai, May 20 '15 at 07:31
I tried that also but not worked – ShafiVayyattukavil May 20 '15 at 07:49 — ShafiVayyattukavil, May 20 '15 at 07:49
try using `min-height: 100vh;` – Rohit Kumar Sep 02 '15 at 06:14 — Rohit Kumar, Sep 02 '15 at 06:14

score 2 · Answer 1 · edited Sep 07 '15 at 04:16

2

You can use height 100% only if the object is inside an element with known height. If the parent have no height, the browser has nothing to reference.

Solution in pure CSS:

.my-div {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
}

You can set in jquery function where you open the dialog:

$('.my-div').css('height', window.innerHeight);

edited Sep 07 '15 at 04:16

Gringo Suave

29,931
6
88
75

answered May 20 '15 at 07:30

Germano Plebani

3,461
3
26
38

score 0 · Answer 2 · edited May 23 '17 at 11:52

0

Try this

.modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
}

.modal-content {
  min-height: 100%;
  height:auto;
  border-radius: 0;
}

How to make Twitter bootstrap modal full screen

edited May 23 '17 at 11:52

Community

1
1

answered Sep 02 '15 at 05:50

Shawn Chang

1

min-height not working for bootstrap modal window

2 Answers2