CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4modal-dialog
Shane
Shane

Reputation: 753

Bootstrap modal body height not changing

I am trying to increase the height of a single modal.

I have added height attributes to the div like so:

    <div class="modal fade" id="RTWmodal" role="dialog" style="margin-top: 20px;">
    <div role="document" class="modal-dialog modal-lg" style='height:1000px;'>
    <div class="modal-content modal-tall" style='height:1000px;'>
    <div class="modal-body" style='height:1000px;'>

And this increases the overall modal however the main body of the modal remains at a set height with scroll bars? See below:

enter image description here

What am i not doing right here?

UPDATE - Full Modal code

<div class="modal fade" id="RTWmodal" role="dialog" style="margin-top: 20px;">
<div role="document" class="modal-dialog modal-lg" style='height:1000px;'>
<div class="modal-content modal-tall" style='height:1000px;'>

<div class="modal-body" style='height:1000px;'>
<h4 id="myPanelModalLabel" class="modal-title">Right to work </h4>

<hr>   

    *CONTENT*



</div>
</div>
 </div>
</div>

Upvotes: 2

Views: 4105

Answers (2)

Vogal
Vogal

Reputation: 104

This should do it

.modal-tall .modal-body 
{
 position: relative;
 min-height: 600px;
 padding: 15px;
}

Upvotes: 3

Shane
Shane

Reputation: 753

Create a new modal classmodal-tall

.modal-tall .modal-body 
{
 position: relative;
 min-height: 600px;
 padding: 15px;
}

Use like this:

 <div class="modal tall fade" id="RTWmodal" role="dialog" style="margin-top: 20px;">
    <div role="document" class="modal-dialog modal-lg">
    <div class="modal-content modal-tall" >

Upvotes: 2

Related Questions