OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

open dropdown list on top of all the div even with scrolling

  • Thread starter Thread starter grabrep gg
  • Start date Start date
G

grabrep gg

Guest
i have bellow table

Code:
 <div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">
<div id="table-scroll">
<table>
    <tbody>
      <tr> 
        <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> 
        <td>    
            <div class="dropdown">
              <span class="dots">...</span>
              <div class="dropdown-content">
                <span>Item 1</span>
                <span>Item 2</span>
                <span>Item 3</span>
                <span>Item 4</span>
              </div>
              </div>
         </td>
      </tr>

    </tbody>
</table>
</div>
</div>
<div class="col-sm-9 p-3 bg-dark text-white">Right Side</div>

with bellow CSS

Code:
  #table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
  }
  #table-wrapper table {
  width:100px;
  }
  #table-wrapper table * {
  color:black;
  }
  #table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
  }
  .dropdown {
   position: relative;
   display: inline-block;
  } 
  .dropdown-content {
    display: none;
     position: absolute;
     background-color: #f9f9f9;  
     z-index: 1;
     width: 150px;
   }
  .dropdown-content span {
    display: block;
    height: 30px;
    text-wrap: nowrap;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 10px;
   align-self: stretch;
   cursor: pointer;
   }  
  .dropdown:hover .dropdown-content {
   display: block;
    position: a;
    z-index: 100;
   }
   .dropdown-content span:hover {
    background-color: #F2F6F8;
   }

my problem is when i hover the ... i need to open the drop down list on top of all the div even when there is a scroll. but now however it opens inside the left div. what i want to is to open on top of all the div. even on top of right side div

enter image description here

i tried using z index and position fixed and relative none worked
<p>i have bellow table</p>
<pre><code> <div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">
<div id="table-scroll">
<table>
<tbody>
<tr>
<td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td> <td>xxxxxxxxxxx</td>
<td>
<div class="dropdown">
<span class="dots">...</span>
<div class="dropdown-content">
<span>Item 1</span>
<span>Item 2</span>
<span>Item 3</span>
<span>Item 4</span>
</div>
</div>
</td>
</tr>

</tbody>
</table>
</div>
</div>
<div class="col-sm-9 p-3 bg-dark text-white">Right Side</div>
</code></pre>


<p>with bellow CSS</p>
<pre><code> #table-scroll {
height:150px;
overflow:auto;
margin-top:20px;
}
#table-wrapper table {
width:100px;
}
#table-wrapper table * {
color:black;
}
#table-wrapper table thead th .text {
position:absolute;
top:-20px;
z-index:2;
height:20px;
width:35%;
border:1px solid red;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
width: 150px;
}
.dropdown-content span {
display: block;
height: 30px;
text-wrap: nowrap;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 10px;
align-self: stretch;
cursor: pointer;
}
.dropdown:hover .dropdown-content {
display: block;
position: a;
z-index: 100;
}
.dropdown-content span:hover {
background-color: #F2F6F8;
}
</code></pre>
<p>my problem is when i hover the ... i need to open the drop down list on top of all the div even when there is a scroll. but now however it opens inside the left div. what i want to is to open on top of all the div. even on top of right side div</p>
<p><a href="https://i.sstatic.net/XIeEW7dc.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/XIeEW7dc.png" alt="enter image description here" /></a></p>
<p>i tried using z index and position fixed and relative none worked</p>
Continue reading...
 

Latest posts

Top