Make the Bootstrap modal Footer display the vertically aligned buttons at the bottom - Asp.net MVC

Asked

Viewed 487 times

0

I have a modal window that is generic and is used to perform CRUD operations. I have a grouping of buttons that need to be aligned to the left and should always be glued to the bottom of the modal, respecting the borders as image. At the moment, they are going up and down according to the amount of fields that window has... I’d like the footer and them to stay fixed at the bottom.

Thank you all!

inserir a descrição da imagem aqui

.modal-content {
    height: 90%; 
}

.modal-dialog {
    max-width: 70%; 
    height: 100%; 
    margin: 0 auto !important; 
}

#contentModal {
    overflow: auto; 
}

#modalGenerica {
    overflow: hidden;
}

.modal-body {
  
}

.modal-content {
    /*background-color: #f8f7fc;*/
}

.modal-footer {
  
}

.modal-header {
    background-color: #ecece9;
}

<div>
  <form asp-action="Create" id="frmCreate">
    <div class="modal-shadow">
      <div class="modal-header">
        <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-dark"><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 class="col-md-offset-2 col-md-10">
        <div class="modal-footer">
          <div class="float-left">
            <div class="btn-group btn-group-sm" role="group">
              <a asp-action="Create" data-modal="" class="btn btn-success text-white" data-toggle="tooltip" data-original-title="Nova Pessoa" data-container="body">
                <i class="icon wb-plus" aria-hidden="true"></i>
                <span class="hidden-xs">Nova Pessoa</span>
              </a>
              <a id="btnPesquisaAvancada" class="btn btn-dark text-white" data-toggle="tooltip" data-original-title="Pesquisa Avançada" data-container="body">
                <i class="icon wb-search" aria-hidden="true"></i>
                <span class="hidden-xs">Pesquisa Avançada</span>
              </a>
              <div class="btn-group btn-group-sm" role="group">
                <a data-original-title="Pesquisa Avançada" class="btn  btn-dark text-white dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                  <i class="icon wb-grid-4" aria-hidden="true"></i> Mais Ações
                </a>
                <div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
                  <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-download" aria-hidden="true"></i>Importar</a>
                  <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-upload" aria-hidden="true"></i>Exportar</a>
                  <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-print" aria-hidden="true"></i>Imprimir</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

//Modal
<div class="modal fade" 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>

css asp.net-mvc modal

1 answer

0


For Bootstrap 4 use class mr-auto.

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />


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

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <div class="btn-group btn-group-sm mr-auto" role="group">
          <a asp-action="Create" data-modal="" class="btn btn-success text-white" data-toggle="tooltip" data-original-title="Nova Pessoa" data-container="body">
            <i class="icon wb-plus" aria-hidden="true"></i>
            <span class="hidden-xs">Nova Pessoa</span>
          </a>
          <a id="btnPesquisaAvancada" class="btn btn-dark text-white" data-toggle="tooltip" data-original-title="Pesquisa Avançada" data-container="body">
            <i class="icon wb-search" aria-hidden="true"></i>
            <span class="hidden-xs">Pesquisa Avançada</span>
          </a>
          <div class="btn-group btn-group-sm" role="group">
            <a data-original-title="Pesquisa Avançada" class="btn  btn-dark text-white dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
              <i class="icon wb-grid-4" aria-hidden="true"></i> Mais Ações
            </a>
            <div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
              <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-download" aria-hidden="true"></i>Importar</a>
              <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-upload" aria-hidden="true"></i>Exportar</a>
              <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-print" aria-hidden="true"></i>Imprimir</a>
            </div>
          </div>

        </div>

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

For Bootstrap 3 use class pull-left.

Example

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

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

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Fechar</button>
      </div>
    </div>

  </div>

  • Thanks for helping @Netinho Santos, but it didn’t work. The buttons didn’t even move.

  • @Jalberromano remove all the modal styles you created and create a raw modal by following one of these examples and see if it works. Surely one of those styles you posted must be killing the bootstrap class. Att.

  • found the problem: In my css the block . modal-content { height: 90%; /modal height/ is getting in the way. I commented and it worked... But there is no way to reconcile them no? I really need to inform the height of the window... }

  • .modal-footer { Justify-content: flex-start; }

  • It didn’t work.... the bad thing is that if I uncomment . modal-content { height: 90%;} the mr-auto doesn’t work...

Browser other questions tagged css asp.net-mvc modal

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