Position the vertical scrollbar on the body (below the header) of a Modal BootStrap window

0

I have a modal window and whenever the view expands, it autofits and creates a vertical scrollbar and includes the Header. Is it possible to make this vertical scrollbar not include the Header (as highlighted in red)?

Modal

<divclass="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div id="contentModal">
            </div>
        </div>
    </div>
</div>

Html (Asp.net Razor)

<div>
    <form asp-action="Create" id="frmCreate">
        <div class="modal-shadow">
            <div class="modal-header modal-header-primary">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-center"> @ViewData["Title"] </h4>
            </div>

            @await Html.PartialAsync("_PessoaFisicaJuridica")

            <div class="modal-footer">
                <div class="col-md-offset-2 col-md-10">
                    <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
                    <button id="btnFechar" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Fechar </button>
                </div>
            </div>
        </div>
    </form>
</div>

CSS

.modal-content {
    height: 90%; /*altura da modal*/
}

.modal-dialog {
    max-width: 70%; /*largura da modal*/
    height: 100%; /*altura da view da modal (não alterar)*/
    margin: 0 auto !important; /*centralizar modal horizontalmente*/
}

#contentModal {
    overflow: auto; /*habilita o overflow no corpo da modal*/
}

#modalGenerica {
    overflow: hidden; /*evitar overflow da view da modal*/
}
    
asked by anonymous 31.07.2018 / 01:59

0 answers