CODEWITHSUNDEEP
twitter-bootstrapmodal-dialogpercentage
Viktor
Viktor

Reputation: 43

Bootstrap modal percentage height

I build app with a lot of modals and I need to set up modal for something like that:

.modal { top: 5%; left: 5%; right: 5%; bottom: 5%; }

So it would be on 90% width and 90% height of browsers window. But I need to have scrollable modal-body. I use modal-header and it has to be always visible, because it contains functional buttons.

When I want to define max-height, even if it's in percentage, it's not correct number, because-for example, header has width set to 5% , but has padding 5px and has defined bottom border to 1px so I can't count these together. For defining overflow I have to define max-width or width, but there is no way to know it dynamically and percentage doesn't fit.

Because I can't find any solution, I started thinking about long scrollable modal despite scrolling in long modals scroll out header.

Is there some way to get what I want?

Upvotes: 4

Views: 7281

Answers (1)

mario.tco
mario.tco

Reputation: 674

You could try this CSS:

.modal{
  width: 90%; /* desired relative width */
  min-height:80%;
  left: 5%; /* (100%-width)/2 */
  margin: auto auto auto auto; /* place center */}

.modal-body{overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;}

.modal-footer {position: absolute;bottom: 0;right: 0;left: 0;}

Here is an example

Let me know if it worked =)

Upvotes: 5

Related Questions