How to leave buttons fixed in floating div

Navigation
3

I have in my system a situation similar to the one I gave as an example. A modal bootstrap that can open at any location on the screen. This mode does not occupy the entire screen. Within this modal, some records are listed, depending on the context. In this modal, I have a div with the record maintenance buttons (edit, delete, include, etc ...). I would like this div with the buttons to always be in the lower right corner of the modal, fixed (because the modal is scrollable, depending on the amount of records), but I can not do it. I already tried to put position: fixed and a margin-left calculated on the hour, but it did not work as I wanted. 

.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>
    
asked by anonymous 22.05.2017 / 14:01

3 answers

3

Note that if you want to position an element relative to your parent or predecessor you should use position:absolute , with position:fixed the element is positioned relative to the browser window, thus, to position div of the action buttons, knowing that div can appear anywhere on the screen, we should always think about its position with respect to its parent so in the event that is called when the modal is displayed we can position div of the buttons based on the position top and left of the modal. The fixed value "160" is only for this example, you should identify which value to use in your modal, add the modal height does not work in this case.

Note that I left the event code commented out, the code is very self-explanatory, I hope it helps. Here is an example snippet: 

/*$("#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><divid="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>
    
22.05.2017 / 14:32
1

Here's an idea. Using position fixed within a 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>
    
22.05.2017 / 16:03
0

Hello

Set the "PAI" div that is 200px tall with position: relative;

In the div with the buttons, set the fixed position but leave the bottom zero. So the button will always be fixed in the footer of the DIV. To fully align right, use right: 0.

Always remember to use the top, left, bottom right properties when using the position property.

The code looks like this: 

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

.botoes-modal {
width: 120px;
height: 40px;
background-color: green;
position: fixed;
bottom: 0;
right: 0; }
    
22.05.2017 / 14:12
Laravel: View and SubViews Persistent connection to the Mysql database [closed]