Disable responsive on the specific section v2

Support
#1

my last post is closed. i cannot post reply there here’s the link https://theme.co/apex/forum/t/disable-responsive-on-the-specific-section/45148

still not fixed. i also make content area dropdown on other page and it the same problem. i think the only way to fix this is make the dropdown/pop up box to be in front. or how you will call that . so when ever the area dropdown it what ever the next content is the dropdown will always be in front of all content. but i don;t know how to fix it.

#2

Hello Jessie,

Thanks for asking. :slight_smile:

I checked the website and thing that needs to be done is change the z-index value of the Row that’s holding Content area dropdown element so that on mobile view it shows up properly. Please do following:

  1. Inspect the Row (click on search icon).

  1. Under Customize > Setup > Class give a class name.
  2. Add following CSS under Pro > Theme Options > CSS:
@media only screen and (max-width: 600px) {
    .class-name {
    z-index: 999;
}
}

Please change name of class class-name as per your requirement.

Let us know how it goes.

Thanks.

#3

still not working. you can visit my site to check it yourself

#4

HI @jessiel9625,

Thanks for the screenshot.
Can you please send us your URL so that we can have a look.
From screenshot its hard to debug the issue.

Thanks

#5

https://myalliance.io/test-pie1/

#6

Hello Jessie,

Thanks for providing the url.

Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-dropdown[data-x-stem*="dr"] {
    z-index: 99999;
}

This code will make sure that the container will always be on top layer to display its contents.

Hope this helps. Kindly let us know.

#7

still not working.

question did you check that if it works or not before you reply to this message? this taking so much time i hope this time you will check it yourself before you reply.

#8

Hi,

Try adding z-index:999999; in Inline CSS of your row element where your dropdown element resides.

If that doesn’t help, please provide us your wordpress admin login in Secure Note

Thanks

#9

still not working

#10

Hi Jessie,

The z-index isn’t always absolute especially if the item is in the container that restrict it (relative styling). Hence, z-index will only effect on the current element which of course works between its siblings, but not taking effect globally (other elements from different containers).

The solution would be using another lightbox where it covers the entire page instead of just pop-up.

I tried and it’s not really going to work on your current setup due to the limitation of the container’s CSS. You could also try this 3rd party plugin https://wordpress.org/plugins/easy-modal/. It’s not from us so please contact them if you have any question regarding that plugin.

Thanks!

#11

so are you saying that content area dropdown element is not working properly more like useless element? in that case maybe just remove that from the xtheme element because there is a problem with the z index when using that.

#12

Hi Jessie,

Did you follow my instruction on that other thread? Sorry for those missing screenshot it seems https://prnt.sc having issues that time.

I don’t see the issue anymore on your site, was it resolve?


Please clarify.

Thanks,

#13

hey paul i’m waiting on your response.
i hope you have a better solution than rad because this is taking too much time and then he just tell me that this is not going to work.
we have 26 licenses of xtheme and still recomended it to our clients and your great support is one of the reason that we still using this theme.

#14

yes i did follow and still not fix. you cannot see the problem in desktop view. you can see site and also put the log in details in the secure note

#15

Hey Jessie,

I’ve commented out the CSS given here because they don’t work and causes an issue. Also, the Content Area Dropdown is not the best element for mobile view. I’d suggest you try the Content Area Modal instead.

The phone view is fixed now. You can watch how I did that in this screencast: https://youtu.be/m41_sKYrL3E

The tablet view has a problem because of the setup that I did, so I recommend that you duplicate your mobile section and set the Row’s z-index back to 0. Please watch https://youtu.be/nLraBo3_mFA

As I said in the screencast, this could be achieved using custom media queries but that would be outside the scope of our support. If you wish to continue with that route, you would need to consult with a third party developer.

I know that my colleagues has given custom media queries here. They were only meant to be a guide or a starting point.

We appreciate your continue patronage and kind words about our support service.

Hope that helps and thank you for understanding.

#16

i still saw a problem. tha is when the modal will pop up at the top.

but thank you for the response. the team decided to use another solution rather than fixing and and customizing this content area dropdown. i hope you will resolve this issue and the next version of the theme because we really like this element rather than install another plugin. and also because of this we look back to our clients website that uses this element and yes we found a problem. ex. we use this for a mobile menu using global blocks to create custom header and the dropdown is out of place in mobile

same goes to the issue of z index on other container.
again thank you for all your help.

#17

#18

Hi Jessie,

Noted that, and I’m sorry if I couldn’t provide any possible solution. But my answer will still be the same since it’s CSS limitation once relative parent and z-index is mixed up. The only solution is a global modal that’s outside the container. To explain this further I’ll give some sample

[container_1]
[popup]This covers the second pop up of container one, z-index works between these two pop ups[/popup]
[popup]Second popup[/popup]
[/container_1]

[container_2]
[popup]But this can't cover any popup or elements from container one, z-index will not work outside this second container [/popup]
[/container_2]

And that’s due to this CSS and what I’m referring for containers are the columns.

.x-column {
    position: relative;
    z-index: 1;
    float: left;
    margin-right: 4%;
}

Again, yes, it must be improved, and as I recommend as temporary workaround, you may use 3rd party modal that aren’t restricted by containers.

Thanks!

#19

never mind rad i just don’t like how you response to my problem that takes more than a month. you keep on insisting that you are right so i keep on wondering why put that content area dropdown in theme element when we cannot use it properly??? and then you suggest third party plugin? that’s very weird dude you are offering plugin that is out of your theme and yet you have what i want in your theme but it’s not working properly? just remove that then.

#20

Hello Jessie,

Sorry for the confusion. As I see your columns and the content area dropdown, it is being mixed up. You have a unique section, row and columns setup. The added behavior of the content area drop down make it more a bit complicated. The reason why you have this kind of issue is because of the z-indexes order. We just need to figure out which element should be behind the other to get this to work. We maybe able to resolve this by adjusting the z-indexes of the rows, columns and the content area elements as well.

Please set the z-indexes of the columns to 9999 while the z-indexes of the content area element is 99999.

Hope this helps.