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

9 posts   •   Page 1 of 1
Bryan
New Member
Rank
Posts: 4
Joined: Mon Sep 12, 2016 5:31 pm

The search bar doesn't work properly on phones

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 2467 times


User avatar
Asmi Khalil
Site Admin
Rank
Posts: 556
Joined: Fri Jun 26, 2015 7:13 am
Location: Tunisia

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

by Asmi Khalil » 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: 556
Joined: Fri Jun 26, 2015 7:13 am
Location: Tunisia

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

by Asmi Khalil » 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

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

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 2454 times

User avatar
Asmi Khalil
Site Admin
Rank
Posts: 556
Joined: Fri Jun 26, 2015 7:13 am
Location: Tunisia

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

by Asmi Khalil » 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

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

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 2446 times

Screenshot_2.png
Screenshot_2.png (98.08 KiB) Viewed 2446 times

User avatar
Asmi Khalil
Site Admin
Rank
Posts: 556
Joined: Fri Jun 26, 2015 7:13 am
Location: Tunisia

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

by Asmi Khalil » 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

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

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: 556
Joined: Fri Jun 26, 2015 7:13 am
Location: Tunisia

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

by Asmi Khalil » 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 Sun Sep 24, 2017 1:25 am