Whoop Search Bar issue

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

Open Support Ticket

Tagged: whoop

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