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

Asked

Viewed 216 times

0

I have a modal window and every time the view expands, it self-adjusting and creating a vertical scrollbar and including Header. It is possible to make this vertical scroll bar not include Header (as highlighted in red)?

inserir a descrição da imagem aqui

Modal

<div class="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*/
}
  • puts a height: 100% inside #modalGenerica and see if the bar keeps showing up, it may not have a defined height on the overflow: hidden and why it is appearing. If you continue to create a practical example using the code tool.

  • In fact the scrollbar should always appear when needed... I just wish it didn’t use Header. That was as it is selected in red.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.