CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Suffii
Suffii

Reputation: 5784

Issue on Setting Bootstrap 3 Modal Percentage Height

Can you please take a look at this Demo and let me know why I am not able to set the Height Percentage of the Bootsrtap Modal

html, body{height: 100%;}
#myModal .modal-dialog { 
    position: relative;
    width: 80%;
    height: 50%;
    left: 1%; 
}

and the modal 

<a href="#myModal" role="button" class="btn btn-default" data-toggle="modal">Launch demo modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary">Save changes</button>
    </div>
</div>
</div>
</div>

Thanks

Upvotes: 0

Views: 1851

Answers (3)

anyavacy
anyavacy

Reputation: 1697

if you want the height of your modal to be 500px, then that's the code for that. you can adjust it the way you want. all what I am doing there is overriding whatever the default value is .modal-content. you can think of it as changing the value of bootstrap.css file.

.modal-content {
  /*then enter the height value you want here*/ 
  height:500px;
}

Upvotes: 0

Tricky12
Tricky12

Reputation: 6822

You are successfully setting the height of the modal-dialog. However, that is not the part of the modal that you see. The part you see is the modal-content inside of the modal-dialog. The modal-dialog height defaults to the size of its content. You need to set the height of the modal-content to be 100% of the modal-dialog in addition to setting the percentage on the modal-dialog.

Demo here

#myModal .modal-dialog .modal-content {
  height: 100%;
}

***Note - This makes your modal look strange, because it will now be bigger than its content and you may have to change the height of the modal-header, modal-body and modal-footer to fit nicely.

Upvotes: 1

JMari&#241;a
JMari&#241;a

Reputation: 324

Try to set the height in px instead of percentage. If this works, then reason why you can't set it as a percentage would be because a parent div does not have a defined height, so it can't get 50% of undefined.

#myModal .modal-dialog { 
    position: relative;
    width: 80%;
    height: 150px;
    left: 1%; 
}

The alternative option would be to define the height of parent divs so it can use the percentage.

Hope this helps.

Upvotes: 0

Related Questions