Search Toggle not displaying the modal on mobile devices

[bartsamuel]

Hello,

I have a search modal in the mobile menu of this website - https://gok.goleszow.pl/ The search doesn’t seem to open on mobile devices even though it opens in the Cornerstone editor preview. Can you help please?

[christian]

Hey Bart,

You’re setup is you placed the Search Modal inside a modal element. I see the issue you’ve described and I have replicated it in my site. However, the setup is not recommended technically as you’ll deal with stacking (z-index) complications like you now experience as well as your users will have to click twice in order to open the search. The content inside a modal is commonly the last interface of user interaction so even though the search modal inside a modal works inside the builder, that might be unintentional.

There is a custom CSS solution to this case, but before I provide the solution, please keep in mind that we do not provide support for custom development. This is just to demonstrate what is possible with custom code. We will not provide further improvements.

Add the following code the Search Modal Element CSS.

$el.x-modal.x-active {
  z-index: 1;
}

I will also post this in our issue tracker so this case will be queued to be investigated by our development team. They will decide if they will allow this behavior in the Search Modal or not.

Thanks.

[bartsamuel]

Hi Christian,

Ok, great, thank you for the explanation. It makes sense. So the best solution would be actually to change the behavior / placement of the search function on mobile devices, just so it’s not within the modal.

Thanks,
Bart

[ruenel]

You are most welcome, Bart.