3

Tenho no meu sistema uma situação semelhante a essa que dei de exemplo. Um bootstrap modal que pode abrir em basicamente qualquer local da tela. Este modal não ocupa toda tela. Dentro desse modal, são listados alguns registros, conforme o contexto. Nesse modal, tenho uma div com os botões de manutenção dos registros (editar, excluir, incluir, etc..). Gostaria que essa div com os botões ficasse sempre no canto inferior direito do modal, fixado (pois o modal é scrollável, conforme a quantidade de registros), mas não estou conseguindo fazer. Já tentei colocar position: fixed e uma margin-left calculada na hora, mas não funcionou como eu queria

.botoes-modal{
width: 120px; 
height: 40px; 
background-color: green; 
}
<div style="overflow-y: auto; height: 200px;">
<table>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
</table>
<div id="botoes-acao" class="botoes-modal">
  Clique para editar
</div>
</div>

3 Respostas 3

3

Nota que se você quer posicionar um elemento em relação ao seu parent ou antecessor deve utilizar position:absolute, com o position:fixed o elemento é posicionado em relação à janela do navegador, desta forma, para posicionar a div dos botões de ações, sabendo que a div pode aparecer em qualquer lugar da tela, devemos sempre pensar na sua posição com relação ao seu parent então no evento que é chamado quando o modal é exibido podemos posicionar a div dos botões com base na posição top e left do modal. O valor fixo "160" serve somente para este exemplo, você deve identificar qual o valor utilizar no seu modal, somar a altura do modal não funciona neste caso.

Nota que deixei o código do evento comentado, o código está bem autoexplicativo, espero que ajude. Segue um snippet de exemplo:

/*$("#modal").on('show', function(event){
     posicionaBotoes();
});*/

$(document).ready(function() {
  posicionaBotoes();
});

function posicionaBotoes() {
  var modal = $("#modal");
  $(".botoes-modal").css('right', modal.offset().left);
  $(".botoes-modal").css('top', modal.offset().top + 160);
}
.botoes-modal {
  width: 120px;
  height: 40px;
  background-color: green;
  float: right;
  position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  id="modal" style="overflow-y: auto; height: 200px; border:1px solid red;">
<table>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
<tr><td>teste</td><td>teste</td></tr>
</table>
<div id="botoes-acao" class="botoes-modal">
  Clique para editar
</div>
</div>

1

Fica aí uma ideia. Usando position fixed dentro de uma absolute.

#modal {
  position: relative;
  width: 100%;
}

#absolute {
  position: absolute;
  bottom: 40px;
  right: 120px;
}

#botoes-acao {
  position: fixed; /* não defina top/bottom/left/right */
  width: 120px;
  height: 40px;
  background-color: green;
}
<div id="modal" style="overflow-y: auto; height: 200px; border:1px solid red;">
  <table>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
    <tr>
      <td>teste</td>
      <td>teste</td>
    </tr>
  </table>
  <div id="absolute">
    <div id="botoes-acao" class="botoes-modal">
      Clique para editar
    </div>
  </div>
</div>

0

Olá!

Defina a div "PAI" que está com 200px de altura com position: relative;

Na div com os botões, defina o position fixed mas deixe zerado o bottom. Assim o botão ficará sempre fixo no rodapé da DIV. Para alinhar totalmente a direita, use right: 0.

Lembre-se sempre de utilizar as propriedades top, left, bottom right ao utilizar a propriedade position.

O código ficará assim:

<div style="overflow-y: auto; height: 200px; position: relative;">

.botoes-modal {
width: 120px;
height: 40px;
background-color: green;
position: fixed;
bottom: 0;
right: 0; }
1
  • Desse jeito não funciona. Eu já havia tentado, e ele fica no canto da tela. Preciso que ele fique no canto da modal 22/05/2017 às 12:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .