CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapbootstrap-modal
GillesDV
GillesDV

Reputation: 293

Make a Bootstrap modal form resize/fit, depending on the contents

I'm currently building a web app in C# with MVC, where I use a Bootstrap modal form for either of two uses (at seperate times, obviously). The problem is, I'm not sure how I can make the form generate with a fitting height, depending on the contents. 

<div class="modal" id="modal-add-application" tabindex="-1" role="dialog" 
                    aria-labelledby="modal-add-application" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close cancel" data-dismiss="modal">
                       <span aria-hidden="true">&times;</span><span class="sr-only">
                       Close</span></button>
                <h4 class="modal-title" id="addApplicationTitle">Add application</h4>
            </div>
            <div class="modal-body" id="addApplicationBody">

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

The body gets filled and the form is shown through an Ajax request, but that's not important right now.

Currently the form is shown like this:

error on my problem

No matter how many or which elements are in the form. There always seems to be +/- 100 pixels too short. I've tried setting a static height, but obviously that's not a 'perfect' solution, as it's either too long or risks being too short anyhow.

Upvotes: 0

Views: 941

Answers (1)

Shel Yang
Shel Yang

Reputation: 623

.modal-body {
    margin-bottom: 100px;
}

Upvotes: 1

Related Questions