Searchbox doesn't work in header on tablet or mobile

Home Forums Product Support Forums Ajax Search Pro for WordPress Support Searchbox doesn't work in header on tablet or mobile

This topic contains 1 reply, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 6 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #15719
    wigital
    wigital
    Participant

    Hi,

    we have a problem with the searchbox in the tablet an mobile view.
    On desktop you can click on the magnifier icon an the searchbox appears.
    If you switch to mobile or tablet using the developer tools of the browser (or you can use a real device) you can also click on the magnifier but nothing happens.
    I have find out, that the javascript is not triggered on mobile, but I don’t know why this happens.

    Can you take a look at it?
    Thanks.

    Kind regards
    Emre

    #15720
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi Emre,

    The problem is that the header widget area actually makes a DOM clone of the search bar in mobile view (and likely in tablet view too, I can see 3 copies), so the same search bar is ‘copied’, creating invalid HTML (because of duplicate IDs) and loss of attached event handlers. This is a very bad practice, and it cannot be resolved with any custom code or option – as the issue is caused by the html cloning itself. I’m not sure which script is it exactly, but likely the widget controller.

    The only possible resolution in this case is to use the search bar in a different position instead. A simple search form without any features would work there I guess, but anything that uses javascript will most likely fail in that position.

    Do you need help with manually placing the shortcode to the header? If so, let me know, and I will try to look up the theme source.

    Best,
    Ernest Marcinko

    If you like my products, don't forget to rate them on codecanyon :)


Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.