The search bar doesn't work properly on phones
Topics related to Realistic theme goes here.

Bryan

New Member Rank
Posts: 4
Joined: Mon Sep 12, 2016 5:31 pm
Display Name: Bryan

The search bar doesn't work properly on phones

linkPost by Bryan » Mon Sep 12, 2016 8:23 pm

The search bar doesn't work properly on cell phones. I guess it is because of my logo
How can i solve it?
Screenshot_2016-09-12-12-04-36.png
Screenshot_2016-09-12-12-04-36.png (152.48 KiB) Viewed 3618 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 724
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: The search bar doesn't work properly on phones

linkPost by admin » Wed Sep 14, 2016 12:29 am

Hi Bryan,
Thanks for joining our forum :D
Try this CSS code, just add it to Appearance => Customize => Design & Layout => Custom CSS textarea and Save:
@media (max-width: 480px) {
	.site-header .search-box {
		display: block;
		position: absolute;
		top: 0;
		right: 12px;
		padding: 14px 0;
	}
	.site-header .mdl-textfield--expandable .mdl-button--icon {
		top: 11px;
	}
}
This will make the searchbar cover your logo when it is in focus mode but it will shrink again when it's not in focus mode ( when you click outside searchbar textfield or refresh the page).
Also, this code only applies when screen width is equal or below 480px which means on mobile view.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
User avatar
Asmi Khalil

Site Admin Rank
Posts: 724
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: The search bar doesn't work properly on phones

linkPost by admin » Wed Sep 14, 2016 12:31 am

By the way, Realistic has been updated to version 1.2.3 https://wordpress.org/themes/realistic
Just updated MDL framework to latest version.
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
Bryan

New Member Rank
Posts: 4
Joined: Mon Sep 12, 2016 5:31 pm
Display Name: Bryan

Re: The search bar doesn't work properly on phones

linkPost by Bryan » Thu Sep 15, 2016 6:13 am

It works! Thanks a lot, a love this theme! :) :lol:
Now i just want to know how can i make the logo disappear when using the searchbar,
just that please.
Thanks for your help!!
Screenshot_2016-09-15-00-04-04.png
Screenshot_2016-09-15-00-04-04.png (186.05 KiB) Viewed 3605 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 724
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: The search bar doesn't work properly on phones

linkPost by admin » Thu Sep 15, 2016 10:16 pm

You're most welcome :D
Just replace the previous code with this:
@media (max-width: 480px) {
	.site-header .search-box.is-focused, .site-header .search-box.is-dirty {
		background-color: rgb(156,39,176);
		width: 100%
	}
   .site-header .search-box {
      display: block;
      position: absolute;
      top: 0;
      right: 12px;
      padding: 14px 0;
   }
   .site-header .mdl-textfield--expandable .mdl-button--icon {
      top: 11px;
   }
}
Since the logo comes before the searchbar in the document HTML markup, it's not possible to use CSS selectors to trigger the logo visibility according to searchbar state ( is-focused or is-dirty ). So the best easy way around this is to expand the searchbar width to 100% and apply to it the same header color as background color. Now the searchbar will cover the entire logo when focused or has some text inside of its textfield which will make the logo, looks like it has disappeared, but it didn't :D

By the way, Realistic has very few reviews on WP.org. If possible, please share your review here: https://wordpress.org/support/theme/rea ... /#new-post
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
Bryan

New Member Rank
Posts: 4
Joined: Mon Sep 12, 2016 5:31 pm
Display Name: Bryan

Re: The search bar doesn't work properly on phones

linkPost by Bryan » Fri Sep 16, 2016 1:54 am

AWESOME! Thank you so much! :D
It works! but, something else, when i click outside the search bar there's a little moment when the searchbar is above the logo, and another thing, how can i change the color of the "X" icon to white on the searchbar? could you help me please? :cry:
Screenshot_4.png
Screenshot_4.png (97.54 KiB) Viewed 3597 times
Screenshot_2.png
Screenshot_2.png (98.08 KiB) Viewed 3597 times
User avatar
Asmi Khalil

Site Admin Rank
Posts: 724
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: The search bar doesn't work properly on phones

linkPost by admin » Fri Sep 16, 2016 8:22 pm

when i click outside the search bar there's a little moment when the searchbar is above the logo
The moment when you click outside the searchbar, the framework removes "is-focused" and/or "is-removed" classes from the searchbar object than starts the animation of shrinking the searchbar. Because our CSS code requires thoses classes to work, CSS only is not enough to fix this. Obviously we will need to use JavaScript and the solution will be very complicated. To be honest, I really don't know how to fix this using JavaScript :oops:
how can i change the color of the "X" icon to white on the searchbar?
This depends on your Operating System. On Mac OSX El Capitan, using Google Chrome ( 1920X1080, Zoomed to 500% to simulate mobile view ) you searchbar look like this:
Image
This X doesn't even exist in the HTML markup to be able to style it using CSS.
Sorry if my response wasn't helpful but, honestly, I've spent more than 10 minutes trying to solve this :roll:
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943
Bryan

New Member Rank
Posts: 4
Joined: Mon Sep 12, 2016 5:31 pm
Display Name: Bryan

Re: The search bar doesn't work properly on phones

linkPost by Bryan » Fri Sep 16, 2016 11:02 pm

Cool, no problem. :D
Thanks a lot for your help!! :D
User avatar
Asmi Khalil

Site Admin Rank
Posts: 724
Joined: Fri Jun 26, 2015 7:13 am
Display Name: Asmi Khalil
Location: Tunisia

Re: The search bar doesn't work properly on phones

linkPost by admin » Sat Sep 17, 2016 2:03 am

Most welcome :)
Glad I helped you!
I think there is a world market for maybe five computers. - IBM chairman Thomas Watson, 1943

Who is online

Users browsing this forum: No registered users and 1 guest

It is currently Sat May 26, 2018 10:05 am