Bollate

HTML

[ANSWERED] html – Nested div doesn’t overlap parent’s siblings

By

Nov 20, 2022 , ,

Solution 1 :

FIRST ANSWER:

You have to remove background-color: inherit; from th.

w3schools resource:

The inherit keyword specifies that a property should inherit its value from its parent element.

UPDATE:

First of all, sorry for misunderstanding,

You gave z-index: 2; to .content class. Its mean all .content elements have equal index. You can fix this and add another way. Go second row and add z-index: 3; then you will understand me. ๐Ÿ™‚

here is fiddle

<th class="content" style="z-index: 3!important;">

Sorry for my bad english.

Solution 2 :

On hover change tr’s and th’s z-index

.overflowTable {
	 overflow-x: scroll;
	 margin-left: 0;
	 overflow-y: visible;
	 padding: 0;
	 position: relative;
	 height: 100vh;
}
 table {
	 border-collapse: separate;
}
  tr {
 background-color: white;
 position: relative;
 z-index: 1;
}
tr:hover {
  z-index: 2; 
   }
   tr:hover th {
  z-index: 3;
}

 th {
	 border-right: 2px solid #eee;
	 font-weight: 600;
	 color: #333;
	 left: 0;
	 position: sticky;
	 z-index: 2;
	 background-color: inherit;
}
 tbody tr:hover {
	 background-color: #fafafa;
}
 tbody th {
	 cursor: pointer;
}
 tbody td {
	 cursor: grab;
}
 tbody td:active {
	 cursor: grabbing;
}
 .headerTable {
	 font-family: "Open-sans", sans-serif;
	 font-style: normal;
	 font-weight: 600;
	 font-size: 18px;
	 line-height: 25px;
	 color: #666;
	 border-bottom: 2px solid #eee;
	 padding: 10px 30px;
	 min-width: 150px;
}

 .content {
	 padding: 10px 30px;
}
 .content .actualMenu {
	 visibility: hidden;
}
 .content .menuMore {
	 position: absolute;
	 width: 250px;
	 visibility: hidden;
	 right: 0;
	 background-color: #333;
	 color: white;
	 box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.1);
}
 .content:hover .actualMenu, .content:hover .menuMore {
	 visibility: visible;
}
 .content .title {
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 justify-content: center;
}
 .content .title .name {
	 flex: 1;
}
 .content .title .moreOptions {
	 position: relative;
	 flex: 0;
}
 
<div class="overflowTable">
  <table>
    <thead>
      <tr>
        <th class="headerTable">
          Name
        </th>
        <td class="headerTable">
          Status
        </td>
        <td class="headerTable">
           People
        </td>
        <td class="headerTable">
           Date
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="content">
        <div class="title">
          <div class="name">
            Name
          </div>
          <div class="moreOptions">
            <span class="actualMenu">...</span>
            <div class="menuMore">              Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
            </div>
          </div>
        </div>
        </th>
        <td class="content">
          Status
        </td>
        <td class="content">
          First Person
        </td>
        <td class="content">
          Random Date
        </td>
      </tr><tr>
        <th class="content">
        <div class="title">
          <div class="name">
            Name
          </div>
          <div class="moreOptions">
            <span class="actualMenu">...</span>
            <div class="menuMore">                   Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
            </div>
          </div>
        </div>
        </th>
        <td class="content">
          Status
        </td>
        <td class="content">
          First Person
        </td>
        <td class="content">
          Random Date
        </td>
      </tr>
    </tbody>
  </table>
</div>

Problem :

I have a very convoluted table in which I have to add a menu that appears on hover and has its position based on each row’s position.
Every row is generated at the same time in a loop (React props.map), so changing the next row z-index is possible, but I don’t know if I should.
I managed to do some work, but I can’t seem to make the menu appear on top of the “th” other than its parent.

I know it (probably) has to do with the Stacking Context, but I don’t know how to fix this.

This fiddle represents a very resumed version of the table: https://jsfiddle.net/4n9bj16x/2/

I tried a lot of things, and some worked but then it broke something else. What I need is a way of maintaining the first column fixed and make this menu overlap all “th” siblings.

Things that worked but broke something else:

  • Taking the “sticky” position out of the “th”, the menu will overlap perfectly, but then it break the fixed first column.
  • Make the menu relative positioned, then it enters the normal flow, but that makes the div grow in and out.
  • Remove the “th” background-color property, but then it becomes invisible and, when the table is scrolled, you can see all the other columns underneath.

Thanks in advance!

PS: The original table is coded in React and SCSS, if this is of any help.

HTML & CSS: (the fiddle is written in scss because its easier to read)

.overflowTable {
	 overflow-x: scroll;
	 margin-left: 0;
	 overflow-y: visible;
	 padding: 0;
	 position: relative;
	 height: 100vh;
}
 table {
	 border-collapse: separate;
}
 tr {
	 background-color: white;
}
 th {
	 border-right: 2px solid #eee;
	 font-weight: 600;
	 color: #333;
	 left: 0;
	 position: sticky;
	 z-index: 2;
	 background-color: inherit;
}
 tbody tr:hover {
	 background-color: #fafafa;
}
 tbody th {
	 cursor: pointer;
}
 tbody td {
	 cursor: grab;
}
 tbody td:active {
	 cursor: grabbing;
}
 .headerTable {
	 font-family: "Open-sans", sans-serif;
	 font-style: normal;
	 font-weight: 600;
	 font-size: 18px;
	 line-height: 25px;
	 color: #666;
	 border-bottom: 2px solid #eee;
	 padding: 10px 30px;
	 min-width: 150px;
}
 .content {
	 padding: 10px 30px;
}
 .content .actualMenu {
	 visibility: hidden;
}
 .content .menuMore {
	 position: absolute;
	 width: 250px;
	 visibility: hidden;
	 right: 0;
	 background-color: #333;
	 color: white;
	 box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1), 4px 4px 10px rgba(0, 0, 0, 0.1);
}
 .content:hover .actualMenu, .content:hover .menuMore {
	 visibility: visible;
}
 .content .title {
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 justify-content: center;
}
 .content .title .name {
	 flex: 1;
}
 .content .title .moreOptions {
	 position: relative;
	 flex: 0;
}
 
<div class="overflowTable">
  <table>
    <thead>
      <tr>
        <th class="headerTable">
          Name
        </th>
        <td class="headerTable">
          Status
        </td>
        <td class="headerTable">
           People
        </td>
        <td class="headerTable">
           Date
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th class="content">
        <div class="title">
          <div class="name">
            Name
          </div>
          <div class="moreOptions">
            <span class="actualMenu">...</span>
            <div class="menuMore">              Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
            </div>
          </div>
        </div>
        </th>
        <td class="content">
          Status
        </td>
        <td class="content">
          First Person
        </td>
        <td class="content">
          Random Date
        </td>
      </tr><tr>
        <th class="content">
        <div class="title">
          <div class="name">
            Name
          </div>
          <div class="moreOptions">
            <span class="actualMenu">...</span>
            <div class="menuMore">                   Options<br/>
              Options<br/>
              Options<br/>
              Options<br/>
            </div>
          </div>
        </div>
        </th>
        <td class="content">
          Status
        </td>
        <td class="content">
          First Person
        </td>
        <td class="content">
          Random Date
        </td>
      </tr>
    </tbody>
  </table>
</div>

Comments

Comment posted by CausingUnderflowsEverywhere

The hover menu (moreOptions) seems to ignore all z index positioning unless we turn off absolute.

Comment posted by Rodolfo Rangel

Yes, if I take the “sticky” position out of the “th”, the menu overlaps perfectly, but then it breaks the fixed first column. And if I make the menu relative positioned, it enters the normal flow, but that makes the div grow in and out. So what I need is this div off the normal flow and the first column fixed. But I don’t know if it is possible.

Comment posted by Rodolfo Rangel

Thanks for reminding me, I tried that already, but what it does is set the background color to transparent so, while the menu becomes visible, so does every other column when you scroll right!

Comment posted by Rodolfo Rangel

Thank you for your reply! I forgot to mention that every row is generated at the same time in a loop (React props.map), so changing the next row z-index may be possible, but I don’t know how to do it recursively!

Comment posted by ร–mer DoฤŸan

Then try z-index : auto; instead of specific index ๐Ÿ™‚ and don’t forget vote me ๐Ÿ™‚

Comment posted by Rodolfo Rangel

Ok, I managed to solve the problem with your ideia, but I think there are better ways to do it still. I’ll vote your answer!

By

Related Post

HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022
HTML

[ANSWERED] javascript – How to handle repeating values in JQuery

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022