CODEWITHSUNDEEP
cssbootstrap-modalbootstrap-4
Vish021
Vish021

Reputation: 399

change bootstrap modal-body content to be scrollable

I have used bootstrap but kind of new to flexbox css.

I have my bootstrap modal which typically has header, body and a footer. I want to change model-body class in such a way that if contents are too big then it will be scrollable, keeping model-header and model-footer at fixed position. I thought of using flexbox css but I am not sure how it works. I have used below flexbox css properties

template:

 <div class="modal-header">
   <!-- contents.. -->
 </div>
 <div class="modal-body">
   <!-- contents.. -->
 </div>
 <div class="modal-footer">
   <!-- contents.. -->
 </div>

css:

.modal-content {
 display: flex;
 flex-direction: column;
 max-height: calc(100vh - 60px);
}

.modal-body {
   overflow: auto;
}

.modal-header, .modal-footer {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

I am giving model-content as maximum viewport height - 60px. This works fine except in IE. Contents are visible and overflown. I don't know the best way to fix this

Any suggestions, comments will be appreciated guys!

Upvotes: 1

Views: 2080

Answers (1)

Shehary
Shehary

Reputation: 9992

It was a simple fix, you add max-height: calc(100vh - 60px); to modal-content selector, remove it and add it to modal-body selector

CSS

.modal-content {
    display: flex;
    flex-direction: column;
}
.modal-body {
    overflow: auto;
    max-height: calc(100vh - 60px);
}
.modal-header, .modal-footer {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

Modal

<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                This Is header
            </div>
            <div class="modal-body">
                This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content This is content 
            </div>
            <div class="modal-footer">
                This is footer
            </div>
        </div>
    </div> 
</div>

<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

Fiddle Tested in IE-10

Upvotes: 1

Related Questions