Submenu overlapped by other components

Question

Submenu overlapped by other components

Navigation

#1 by (1 votes)

1

I have the following code which 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 overlapped by other components.

I noticed that it displays correctly by 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 has changed.

Would anyone have any idea what might be causing this?

Thank you

css

asked by anonymous 09.10.2015 / 14:16

1 answer

How to catch Owl Carousel event Which version of primefaces extensions is compatable with primefaces 3.5?

score 1 · Answer 1

I think your problem is because of a flaw in the definition of 'z-index' which is responsible for creating plans, or levels of layers.

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

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

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

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

Another note to make is with the use of the z-index property. You must be very careful. Many people begin to set it from 999 and then start to increase at this rate, ending with a confusing code.

I do not know a guide that is considered ideal or correct, but in my workflow I usually organize by element importance and start with definitions in dozens. Example:

Menu is top priority, using the 90's so I can set the menu to 90, a logo with 91, and the dropdown with 92.

My header is a secondary priority, so I set it to 80, and so on.