CSS Absolute Positioning within scrollable table

Question

Okay, so I have a table with x amount of rows in it that can be dependable on how much data is in that table, the table is designed to scroll when the rows are more than the view height.

On hover of a menu cell in the table, a little drop down menu appears underneath the icon, it needs to float over everything else though and not simply 'push' the rest of the content down.

I've set absolute positioning on the dropdown and this seems to work UNTIL i start scrolling the table, and then the menu appears to be positioned relative to the original positions of the rows on the page if there were no scroll bars.

.tableDropMenuContainerContent {
    min-height: auto;
    min-width: 150px;
    position: absolute;
    background-color: white;
    display: none;
}

Is there anyway to set this so that the menu behaves like the first few rows for the whole rows in the table?

$(document).ready(function() {

  $('.extMenuCell').hover(function() {
    $(this).css('background-color', '#e1d9ff');
    $(this).children('.tableDropMenuContainerContent').css('display', 'block');

  });

  $('.extMenuCell').mouseleave(function() {

    $(this).css('background-color', '#eaf3ff');
    $(this).children('.tableDropMenuContainerContent').css('display', 'none');
  });
});

.testTable {

  width: 400px;
  height: 200px;
  overflow: scroll;

}


.panel {
  background: #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
  border-radius: 3px;
  border: none;
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 2px;
}


table thead th {
  padding: 30px;
}

table thead th {
  padding: 15px 5px;
  font-weight: 500;
  text-align: left;
}

tfoot td,
tfoot th,
thead td,
thead th {
  padding: .5rem .625rem .625rem;
  font-weight: 700;
  text-align: left;
}




.extMenuCell,
.extMenuCellHdr {
  width: 5%;
  padding: 0;
}



.extMenuCell,
.extMenuCellHdr {
  width: 5%;
  padding: 0px;
}

.extMenuIcon {
  z-index: 1;
  position: absolute;
}


.tableDropMenuCell {
  background-color: rgb(234, 243, 255);

  cursor: pointer;
}

.tableDropMenuContainer {}


.tableDropMenuContainerContent {
  min-height: auto;
  min-width: 150px;
  /* float: left; */
  position: absolute;
  background-color: white;
  display: none;
}





.tableDropMenuContainerContent a {
  display: block;
  font-size: 14pt;
  text-align: center;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testTable">
  <table class="panel unstriped">
    <thead>
      <tr>



        <th class="extMenuCellHdr"></th>
        <th class="main-action"></th>
      </tr>
    </thead>
    <tbody class="scrollable-table">

      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>


    </tbody>
  </table>
</div>

Someone please help me understand where i'm going wrong. :)

Manikandan2811 · Accepted Answer · 2019-09-04 09:12:03Z

2

Add this css code..

css

  .tableDropMenuCell {
    position: relative;
  }
  .tableDropMenuContainerContent {
    z-index: 9;
  }

answered Sep 4, 2019 at 9:12

Manikandan2811

8414 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

yunzen · Accepted Answer · 2019-09-04 09:39:14Z

position has some behavior you have to get accustomed to. Especially the wording of possible values (relative and absolute in this case) might be misleading, as position: absolute behaves relative in a way and position: relative is sort of absolute. So let's start, it'll be funny!

First let's talk about position: absolute. This will set the absolute position relative to the closest containing positioned element (CCPE). This element will be the nearest element up the HTML DOM hierarchy, that has a computed position value other than static (which is the default). If there is no such CCPE, then the whole document element (<html>) will be it. In the latter case position: absolute really behaves like an absolute positioning.

But if the <html> element is the CCPE, that means that the position is calculated relative to the whole document. If you scroll the table, there will be no change in the scrolling of the document, and the 'dropdowns' won't move. What you need is to define the CCPE. As an example, you can use table or .tableDropMenuCell as the CCPE

Furthermore, the position: absolute changes the behavior of some other CSS rules as well, namely top, right, bottom and left (listed CW from 12). If all of these have the default value of auto then the calculated position of the absolute positioned element will be the same as if would have been with position: static (the default value), but without using the space in the document layout flow.

If you want to enhance the look and feel, you can set the top and left value to exactly control the position.

Altogether:

$(document).ready(function() {

  $('.extMenuCell').hover(function() {
    $(this).css('background-color', '#e1d9ff');
    $(this).children('.tableDropMenuContainerContent').css('display', 'block');

  });

  $('.extMenuCell').mouseleave(function() {

    $(this).css('background-color', '#eaf3ff');
    $(this).children('.tableDropMenuContainerContent').css('display', 'none');
  });
});

.testTable {

  width: 400px;
  height: 200px;
  overflow: scroll;

}


.panel {
  background: #fff;
  -webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24);
  border-radius: 3px;
  border: none;
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1rem;
  border-radius: 2px;
}


table thead th {
  padding: 30px;
}

table thead th {
  padding: 15px 5px;
  font-weight: 500;
  text-align: left;
}

tfoot td,
tfoot th,
thead td,
thead th {
  padding: .5rem .625rem .625rem;
  font-weight: 700;
  text-align: left;
}




.extMenuCell,
.extMenuCellHdr {
  width: 5%;
  padding: 0;
}



.extMenuCell,
.extMenuCellHdr {
  width: 5%;
  padding: 0px;
}

.extMenuIcon {
  z-index: 1;
  position: absolute;
}


.tableDropMenuCell {
  background-color: rgb(234, 243, 255);

  cursor: pointer;
  
  /* new */
  position: relative;
}

.tableDropMenuContainer {}


.tableDropMenuContainerContent {
  min-height: auto;
  min-width: 150px;
  /* float: left; */
  position: absolute;
  background-color: white;
  display: none;
  
  /* new */
  z-index: 1;
  top: 50%;
  left: 50%;
}





.tableDropMenuContainerContent a {
  display: block;
  font-size: 14pt;
  text-align: center;
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testTable">
  <table class="panel unstriped">
    <thead>
      <tr>



        <th class="extMenuCellHdr"></th>
        <th class="main-action"></th>
      </tr>
    </thead>
    <tbody class="scrollable-table">

      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>
      <tr>
        <td class="tableDropMenuCell extMenuCell">
          <a href="#" class="tableDropMenuContainer">
            <svg width="35" height="35">
              <rect width="35" height="35" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
            </svg>
            <div class="tableDropMenuContainerContent">
              <a href="">Option A</a>
              <a href="">Option B</a>
            </div>
          </a>
        </td>
      </tr>


    </tbody>
  </table>
</div>

Collectives™ on Stack Overflow

CSS Absolute Positioning within scrollable table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related