EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Pierre on June 30, 2017, 07:03:26 AM



Title: [SOLVED] Dropdown menu not on top
Post by: Pierre on June 30, 2017, 07:03:26 AM
Hello
I have dropdown button which show menu on hover,
I made example here:
http://code.reloado.com/ecituq3/28/edit
Problem is that second Button does not show menu correctly when you come with mouse over him. Menu is displayed somehow in the background.
I try with z-index but it does not worked.
Any help will be great.


Title: Re: Dropdown menu not on top
Post by: jarry on June 30, 2017, 08:24:25 PM
You should set the 'overflow:visible' CSS style for the container panel. The updated example below works fine.

http://code.reloado.com/ecituq3/29/edit#preview


Title: Re: Dropdown menu not on top
Post by: Pierre on July 01, 2017, 12:23:32 AM
Thank you very much for your help but I can not figure out how to implement it on other example:
http://code.reloado.com/ecituq3/30/edit#preview
if you resize browser so the menu have no place to open to bottom must must be opened at top (please see image below) then menu is not opened.
In your example it works but on this (new) it does not.
Can you please tell me why not?
Thank you.


Title: Re: Dropdown menu not on top
Post by: jarry on July 01, 2017, 08:18:38 AM
You should set the 'cls' property with 'panel-overflow-visible' value to let the panel has the 'overflow:visible' style.
Code:
<div data-options="region:'center'" cls="panel-overflow-visible" style="overflow:visible">
  <table id="dg" data-options="header:'#invoices_header',singleSelect:true,border:false,fit:true,fitColumns:true,scrollbarSize:0,cls:'panel-overflow-visible'"> 
...

The example below works fine.

http://code.reloado.com/ecituq3/31/edit#preview


Title: Re: Dropdown menu not on top
Post by: Pierre on July 01, 2017, 01:30:30 PM
Awesome, thank you so much for your help.
It works perfect now  ;D