Full screen search form doesn’t display on tablets

  • Resolved mirons

    (@mirons)


    1 month, 2 weeks ago

    Hi,

    When I’ve tested my website functionalities on different devices, I noticed that only on tablets (iPads of different sizes and on Samsung tablets and other tablets) the full screen search form doesn’t display.

    This is after enabling the plugin settings of ‘Mobile Full Screen’.

    On mobile phones it works. On phones if I focus on the search field, it opens the full screen search form and I can type in a search query. But on tablets the only response is that the keyboard pops up, but no search form opens on the screen.

    In the ‘Mobile full screen’ settings it says: ‘Full screen search on focus. Will not work if the search form is inside the block with position: fixed’. I don’t see that the search form is inside a block with a fixed position so I don’t think this is the issue (and, as mentioned, it’s working on mobile phones).

    We can replicate this issue in the link I’ve provided here (which is a test site just for testing things).

    The search form is at the very top of the page, inside the header.

    If we inspect it with developer tools, toggle the device toolbar and choose ‘Dimensions: Responsive’, no matter what screen size we display the webpage in, whether it’s a screen size of a tablet or a phone, focusing on the search field would open up the full screen search form.

    However, if we select for the screen dimensions a specific device:

    If we select any phone, such as Galaxy s9+, iPhone 12 Pro, iPhone 14 Pro Max, Samsung Galaxy s20 Ultra etc, again the full screen search form would display as it should.

    But, if we select from the dimensions drop down any device that is a tablet, such as iPad, iPad Air, iPad Pro, iPad Mini, Galaxy Tab s4, Surface Pro 7 etc, focusing on the search field won’t open the full screen search form.

    I would appreciate if you could please let me know how this can be resolved. If I can add a function to functions.php, or modify something in the plugin files, or with css I would gladly do so.

    Thank you very much!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author ILLID

    (@mihail-barinov)

    Hi,

    Well this option was specially built for mobile devices. So full screen search will work on mobile but not on tablets. But this behavior can be changed by using the following code snippet:

    add_action( 'wp_enqueue_scripts', 'aws_wp_enqueue_scripts', 999 );
    function aws_wp_enqueue_scripts() {
     
        $script = '
            function aws_show_modal_layout( show, options  ) {
                var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
                if ( width <= 1024 ) {
                    return true;
                }
                return false;
            }
            AwsHooks.add_filter( "aws_show_modal_layout", aws_show_modal_layout );
        ';
     
        wp_add_inline_script( 'aws-script', $script);
        wp_add_inline_script( 'aws-pro-script', $script);
     
    }

    This code will show full screen search for all devices with width <= 1024 px.

    Regards

    Thread Starter mirons

    (@mirons)

    The function resolved that issue. Thank you very much for your help with this!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.