display problems with Mozilla Firefox for Mobile

Home Forums Product Support Forums Ajax Search Pro for WordPress Support display problems with Mozilla Firefox for Mobile

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #6085
    pmodugno
    pmodugno
    Participant

    Hello, I am writing for the second time because I noticed another problem. In practice I have found any problem only on Mozilla Firefox (with all other browsers work correctly and perfectly!).

    The display problem I check when I resize the browser window with Mozilla Firefox. You can try it too. This is my test site my website

    Try to adjust Mozilla browser window and you’ll understand what I mean. The input form overlaps with other HTML elements. Can you kindly tell me how can I fix this?

    I attach a picture to make better my problem.

    Thanks again and I’ll again congratulated for the excellent work. Thank you!

    ps: can be bootstrap that I use?

    Attachments:
    You must be logged in to view attached files.
    #6087
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    Hi!

    I see multiple issues there.

    The search shortcode is placed inside a Form element, which causes invalid HTML output and possibly malfunctioning as well – beacuse the search uses it’s own form, and a nested forms are prohibited in HTML.
    The solution is to remove the container form element.

    Currently the shortcode must be placed something like:

    <div class="col-xs-12 col-sm-12 col-md-6">
        <form ....>
           <?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>
        </form>
    </div>

    and the correct layout is without the form, so something like:

    <div class="col-xs-12 col-sm-12 col-md-6">
    
           <?php echo do_shortcode("[wpdreams_ajaxsearchpro ...]"); ?>
    
    </div>

    This might not solve the problem yet, because there is something else. The navigation bar is a floating element as I can see, and the “col-xs-12 col-sm-12 col-md-6” div container is not. So it just sits on top of the floating navigation bar incorrectly.

    My suggestion is to use a CSS code to force a floating clear before the search is displayed:

    .navbar:after {
        content: "";
        display: table;
        clear: both;
    }

    or if that’s not working, maybe:

    .col-xs-12.col-sm-12.col-md-6 {
        clear: both;
    }

    I don’t know exactly, it’s not a plugin related issue, but I guess one of these should work.

    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.