Overlapping submenu by other components

Question

I have the following code that displays a menu-submenu.

<div class="btn-group btn-group-xs" style="overflow: visible !important; ">
     <button data-toggle="dropdown" class="btn btn-white dropdown-toggle" aria-expanded="true" style=" border-color: #ccc; overflow: visible !important;">
          <i class="ace-icon fa fa-angle-down icon-on-right"></i>
     </button>
     <ul class="dropdown-menu" style="overflow: visible !important;">
        <li class="dropdown-submenu" style="overflow: visible !important;">
            <a href="#">AAA</a>
        </li>                        
     </ul>
</div>

But within a datatable, the submenu is superimposed by other components.

I noticed that it correctly displays removing the ui-datatable that the prime generates, but of course the layout is compromised.

<div id="list" class="ui-datatable ui-widget">

I tried to insert the overflow but nothing changed.

Would anyone have any idea what might be causing this ?

Thank you

Answer 1

I believe your problem is because of a fault in the definition of z-index which is responsible for creating plans, or layer levels.

For example, if you set the class with z-index:1 and another class with z-index:10, the div with index 10 will be on top of the other.

So to solve your problem, just set a z-index for your dropdown.

.dropdown-menu {
    position:relative;
    z-index:99;
}

Note: for z-index to work, you must have the position property set as well, so make sure your css already has this property. If not, I recommend using position relative, which will have no direct influence on your layout.

Another observation to be made is the use of the z-index property. You should be very careful. Many people start to define from 999 and then start to increase at this rate, ending up with a confusing code.

I don’t know a guide that is considered ideal or correct, but in my workflow I usually organize by element importance and start with definitions in tens. Example:

Menu is top priority, using nineteen, so I can set the menu with ninety, one with ninety and the dropdown with ninety.

My header is of secondary priority, so I define with nineteen eighties, and so on.