Issue with z-index and "widgets_wrapper" class

Hi, I am using Betheme with the Essential Grid plugin (http://codecanyon.net/item/essential-grid-wordpress-plugin/7563340?s_phrase=Gallery&s_rank=17)  to display various filters. 

 I am having a problem with the dropdown of the filter "going under" the footer text and being un-clickable (see screenshot). I tried forcing the z-index of the dropdown, and several other ideas but nothing worked. I contacted the plugin developers, and after trying for a few days had the same problem. In conclusion they replied..

"This is style conflict from your theme i have tried all possible solutions but nothing seems to be working, it's "container" class within "widgets_wrapper" class which is coming on top, setting z-index also not working."

Hence i am contacting you! Is there anyway i can stop this happening? Links are below which highlight the problem. (click on the "australia" tab in the "Select Country" dropdown and then hover over the Tab again ("select country") and you'll see how it goes under the footer text.

PAGE LINK: http://apmhexseal.com/find-reps-distributors/

SCREENSHOT: http://s29.postimg.org/9vzopvmrb/problem.png

Thx!




Comments

  • Hi,

    as you know, it's 3rd party plugin so we are not sure if we'll be able to help you. We can have a look on it of course but please tell us how can we replicate this issue because you don't have enough items in this menu and we are unable to reach the footer position. We tried on few different computers and it is just impossible.

    Thanks!
  • if you go to this page:


    Then click on "Select Country" and choose "australia" this will filter so just one item is displayed and the page will become "shorter"

    Then click on "select country" or "select state" and you will see the dropdown goes under the footer elements. 

    When i spoke to the Plugin guys, they suggested it was something to do with the "container" class within "widgets_wrapper" class of the theme. If i can somehow lower the z-index of teh footer or even maybe put a minimum height of this page it should fix it? but so far i have been unable to do either :(

    Thx!


  • We did checked it and we noticed that below css will do the trick:
    #Content {
        position: relative;
        z-index: 2 !important;
    }
  • You are a genius! Works like a charm!  thank you so much for your quick help!!

    :)
Sign In or Register to comment.