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.
This website uses cookies

We use cookies to personalise content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you’ve provided to them or that they’ve collected from your use of their services.

Cookies are small text files that can be used by websites to make a user's experience more efficient.

The law states that we can store cookies on your device if they are strictly necessary for the operation of this site. For all other types of cookies we need your permission. This means that cookies which are categorized as necessary, are processed based on GDPR Art. 6 (1) (f). All other cookies, meaning those from the categories preferences and marketing, are processed based on GDPR Art. 6 (1) (a) GDPR.

This site uses different types of cookies. Some cookies are placed by third party services that appear on our pages.

You can at any time change or withdraw your consent from the Cookie Declaration on our website.

Learn more about who we are, how you can contact us and how we process personal data in our Privacy Policy.

Please state your consent ID and date when you contact us regarding your consent.