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

Question

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

Navigation

#1 by (0 votes)

0

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

Thank you all!

.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

asked by anonymous 16.08.2018 / 00:21

1 answer

Problems with ListView and Spinner Operands can not be transmitted together with forms that still appear to be the same

score 0 · Accepted Answer

For Bootstrap 4 use the mr-auto class.

Example

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="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><linkhref="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 the pull-left class.

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><scriptsrc="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>