Dropdown is cropped while doing hover using transform

user_13635286 0
Viewed 488

Actually I want to achieve a dropdown,in which each of the cards having three dots icon and after clicking in the icon i want a dropdown which should be fully visible after clicking that icon. For hovering the cards I am using transform: translateY(-3px); in the card-body class and for the dropdown I am using transform: translate3d(31px, 23px, 0px);. Its working properly if I don't have card in the below of the card which i have hovered See this Image . But if I have cards exact below that card and I click on the three dots icon for dropdown so its showing like this refer this image for the actual problem . Can someone please help me out. I think code snippet won't run properly but you can refer the code and picture to understand what is happening actually And if you want any more input so do let me know. Thanks in Advance !!

.card-body{
    height:150px;
    background-color: white;
    border-radius: 10px;
    padding: 0.75rem 0.80rem 1rem 1.25rem;
    box-shadow: 1px 2px 9px 1px #A0A0A059;
    border: 0.25px solid #E6E6E6;
    border-radius: 7px;
    opacity: 1;
}
.card-body:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
}
.dropdown-menu {
    padding: 0;
    margin: 0;
    border-radius: 0;
    position: absolute; 
    transform: translate3d(31px, 23px, 0px); 
    top: 0px; 
    left: 0px; 
    will-change: transform;
}
.dropdown-item {
    position: relative;
    padding: 10px 10px;
    border-bottom: 1px solid #c2cfd6;
}
 <div class="card-body pb-0">
            <div class="row float-right ds-icon-container">
              <div class="btn-group float-right p-0">
                <button type="button" class="btn btn-circle p-0"
                  [ngClass]="pipelineOverview.status === 'active' ? 'btn-green' : 'btn-red'">
                </button>
              </div>
              <div class="btn-group float-right p-0">
                <button type="button" class="btn btn-transparent dropdown-toggle p-0" data-toggle="dropdown"
                  aria-haspopup="true" aria-expanded="false">
                  <!-- <i class="icon-settings"></i> -->
                  <img class="three-dots" src="../../assets/icons/icons8-menu-vertical-50.png" alt="Vertical Dots">
                </button>
                <div class="dropdown-menu dropdown-menu-right" x-placement="bottom-end">
                  <a class="dropdown-item"><i class="ds-icon-start"></i>Start</a>
                  <a class="dropdown-item"><i class="ds-icon-restart"></i>Restart</a>
                  <a class="dropdown-item"><i class="ds-icon-stop"></i>Stop</a>
                  <a class="dropdown-item" (click)="populateDataInEdit(pipelineOverview)"><i class="ds-icon-edit" ></i>Edit/Preview</a>
                  <a class="dropdown-item"><i class="ds-icon-healthcheck"></i>Health Check</a>
                </div>
              </div>
            </div>
          </div>

transform hover drop-down-menu css html
2 Answers

Looks like a z-index issue: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

Because the elements are rendered later, they are stacked on top of the elements rendered before. Your menu is nested in a lower plane, and is displaying underneath other elements. Increasing z-index to a value higher than the other ones you want it to overlap, should resolve the issue.

tl;dr:

.dropdown-menu {
    z-index:9999
}
user_22274820

Try adding z-index property to the items of drop-down menu or to the menu itself... You can even define Z axis for the element in transform also, If it doesn't works then try for overflow properties also... Kindly check it!

user_136990270
Related