IMPLEMENTED: Search Element Overlay slides up with the header on mobile

Feature Requests / Improvements
1

There 3 populars circumpstances on Bricks make the Search form overlay to dissappear when clicking on the text area on mobile.

  1. The header is Sticky on scroll + Slide up after ## pixels
  2. Search element resides on the header as “Icon & Overlay”
  3. User is on mobile

Fails on all browsers, at least on iOS.

The problem is that when clicking the search text area, the mobile keyboard appears, it slides up the header, dragging and hidding the search form itself.

A video is attached https://we.tl/t-9SG2cA0DCa

It would be great that this is fixed on a future update

2

This fix doesn’t works, I’m attepting to prevent the class .slide-up is added to #brx-header once the search text form .bricks-search-form is clicked, which is the moment when the iOS / Android keyboard slides up the header.

I’ve been attempting to build, but I didn’t succeed to make it work.

document.querySelector('.bricks-search-form').addEventListener('click', function(event) {
  event.stopPropagation();
});
3

Hi Paquito,
Thanks so much for your report!

A little CSS is not enough in this case, as the search form is also located in the header. Accordingly, it is understandable that it also scrolls out of the viewport when the entire header is transformed upwards. Accordingly, I see this more as an improvement - even if it looks like a bug at first glance.

If you want to keep “slide-up”, the only way is to place the search field in a popup that you then open via an interaction on an icon, for example. Since the popup html is not in the header, this should work without any problems.

However, I have created an improvement task for this and hope we can improve the behavior in the future.

Best regards,
timmse

1 Like
4

I’ve solved the issue by adding this code:

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const style = document.createElement('style');
    style.innerHTML = `
        .no-scroll-search-overlay {
            overflow: hidden;
            position: fixed;
            width: 100%;
        }
    `;
    document.head.appendChild(style);

    const searchOverlay = document.querySelector('.bricks-search-overlay');
    const body = document.body;

    if (!searchOverlay) return;

    const toggleNoScroll = () => {
        if (searchOverlay.classList.contains('show')) {
            body.classList.add('no-scroll-search-overlay');
        } else {
            body.classList.remove('no-scroll-search-overlay');
        }
    };

    // Monitor changes in the class of searchOverlay
    const observer = new MutationObserver(() => {
        toggleNoScroll();
    });

    observer.observe(searchOverlay, { attributes: true, attributeFilter: ['class'] });

    // Initial check in case the overlay is already shown
    toggleNoScroll();
});
</script>

This adds a class on body that prevents scrolling while the “search overlay” has “.show” class.

5

Hi guys,

We’ve added this improvement in Bricks 1.10, now available as a one-click update in your WordPress Dashboard.
You can see the full changelog here: Bricks 1.10 Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
M