Whoop Search Bar issue

This topic contains 23 replies, has 4 voices, and was last updated by  Naveen Giri 4 years, 8 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket

Tagged: 

  • Author
    Posts
  • July 7, 2019 at 1:16 pm #496548

    Spencer Culpin
    Expired Member
    Post count: 54

    Hi,

    I’ve updated to Whoop v2.

    When viewing on a mobile screen the search bar doesn’t show the results correctly. I’ve attached an image to show how the results are hidden.

    Can you suggest a solution?

    Many thanks

    July 8, 2019 at 11:26 am #496632

    Alex Rollin
    Moderator
    Post count: 27815

    Please share a link to the page where you see the issue and WP Admin credentials so we can debug.

    Thanks

    July 10, 2019 at 5:03 am #496897

    Spencer Culpin
    Expired Member
    Post count: 54
    This reply has been marked as private.
    July 10, 2019 at 6:34 am #496914

    Kor
    Moderator
    Post count: 16516
    This reply has been marked as private.
    July 10, 2019 at 7:06 am #496923

    Spencer Culpin
    Expired Member
    Post count: 54
    This reply has been marked as private.
    July 10, 2019 at 10:43 am #496943

    Kor
    Moderator
    Post count: 16516

    Hi Spencer,

    Thanks for your reply. Let’s try applying this custom CSS code below and see if it looks better on mobile. 

    @media only screen and (max-width: 600px) {
  form.geodir-listing-search.gd-search-bar-style {    
    height: 150px;
}

.gd-suggestions-dropdown.gdas-search-suggestions.gd-ios-scrollbars {max-height: 150px!important;}

}
    July 11, 2019 at 10:39 am #497098

    Spencer Culpin
    Expired Member
    Post count: 54

    Hi Kor,

    Thank you for your help.

    When using your code it leaves a big gap under the search bar on a mobile screen. Can you please suggest CSS code that lists the search result over the existing content, maybe with a white background behind the search listings which seems to be the standard way of showing results on a mobile screen.

    Many thanks,
    Spencer

    July 11, 2019 at 4:16 pm #497146

    Alex Rollin
    Moderator
    Post count: 27815

    Decrease the number 150 in the code above to adjust it to meet your needs.

    July 11, 2019 at 4:38 pm #497149

    Kor
    Moderator
    Post count: 16516

    Or reduce both abit

    @media only screen and (max-width: 600px) {
  form.geodir-listing-search.gd-search-bar-style {    
    height: 100px;
}

.gd-suggestions-dropdown.gdas-search-suggestions.gd-ios-scrollbars {max-height: 60px!important;}

}
    July 21, 2019 at 4:08 am #498782

    Spencer Culpin
    Expired Member
    Post count: 54

    Hi,

    Thanks for your suggestions, but the layout isn’t working as it should. It used to work OK for Whoop v1 without having to leave gaps under the menu bar when viewing on a mobile phone. Can you suggest an option so that all the search results can be shown on a mobile screen without having to leave a massive gap between the top bar and content below?
    Many thanks,
    Spencer

    July 21, 2019 at 6:05 am #498784

    Spencer Culpin
    Expired Member
    Post count: 54

    Here is a screenshot of your Whoop v2 demo when viewing in mobile format, showing the search results are hidden.

    July 22, 2019 at 5:53 am #498832

    Kor
    Moderator
    Post count: 16516

    Hi Spencer Culpin,

    I will get a developer to look into this but in the meantime, I noticed that your GD membership has expired, kindly renew it if you wish to continue to receive support from us.

    Thanks!

    August 13, 2019 at 9:07 am #502815

    Spencer Culpin
    Expired Member
    Post count: 54

    Hi Kor,

    Any update on this as it is still not working correctly when viewing on a mobile?

    Many thanks

    August 13, 2019 at 6:42 pm #502921

    Kor
    Moderator
    Post count: 16516

    Hi Spencer,

    I apologize for the delay on this one. Will follow up with the developers.

    Thanks!

    August 16, 2019 at 8:47 am #503337

    Naveen Giri
    Moderator
    Post count: 1559

    Hi, please try following css in customiser and replace the existing css added there.

    
@media only screen and (max-width: 600px) {
	form.geodir-listing-search.gd-search-bar-style .gd-suggestions-dropdown {    
	  	position: static;
	}
	/*  form.geodir-listing-search.gd-search-bar-style {    
	    height: 150px;
	}
	.gd-suggestions-dropdown.gdas-search-suggestions.gd-ios-scrollbars {max-height: 150px!important;} */
}

    Thanks

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 24 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket