Home › Forums › Graphene Mobile › Support
Search bar incorrectly displayed on Opera Mini by search widget
-
I have a problem with my search bar (displayed using the WP Widget “Search” )
The search bar displays correctly using the stock Internet browser on my phone.
However itr displays incorrectly without any text and does not work with Opera Mini`.
Is this easy to fix? OR can I stop the search widget from displaying on a mobile?
I am using Android v 2.3.3 on an HTC Wildfire phone which includes a stock Internet browser v 2.3.3
I have installed an alternative browser Opera Mini v 7.5.31657
There is a post about using wp_is_mobile()in wordpress.stackexchange.com
BUT I don’t really understand it and don’t know how to implement it with Graphene-mobile!
Can someone help me? Can I use the code below? Where do I put it?
================================================================================
POSSIBLE ANSWER IN POST AT:
// Example
if (
! wp_is_mobile()
AND is_active_sidebar( ‘sidebar-1’ )
) :
?>
<div id=”secondary” class=”widget-area” role=”complementary”>
<?php dynamic_sidebar( ‘sidebar-1’ ); ?>
</div><!– #secondary .widget-area –>
<?php
endif;
AdminWhat’s the URL to your site? You can remove the search widget on mobile by adding some CSS to the Custom CSS option in WP Admin > Appearance > Graphene Mobile > Display.
AdminI just visited your website and I don’t see any search bar other than the Graphene Mobile’s default one.
When using the stock internet browser that comes with the phone, the search bar is displayed as per your example, and works OK.
When using the Opera Mini browser, the search bar looks as per the link below and doesnt work i.e. no part of the search bar responds to being touched.
AdminHurm.. try adding this to the Graphene Mobile Custom CSS feature:
#top-search .search-input {
width: 55%;
}
.landscape #top-search .search-input {
width: 70%;
}CSS above did not work. I realised that the problem is unrelated to the search widget, as none of my widget output appears on the phone. The problem is caused by the normal search box. Graphene allows it to be turned off, Graphene mobile lacks that option.
Can you provide better CSS? The word SEARCH still appears over other text on the screen.
As a quick fix, I used the following inelegant custom CSS – just zeroising everything.
#top-search {
width: 0%;
height: 0px;
background: url(images/sprite-master.png) right -542px no-repeat #fff;
clear: both;
}
#top-search .search-input {
width: 0%;
margin: 0px 0 0 0px;
border: none;
background: none;
}
.landscape #top-search .search-input {
width: 0%;
}
#top-search .search-submit {
background: none;
border: none;
text-transform: uppercase;
width: 0px;
float: right;
text-align: center;
margin-top: 0px;
}
AdminSites visited using Opera Mini browser goes through Opera servers that reduces the load size of the page, and in doing so apparently it changed something in the site. The misaligned search button is only one of those. The text in the site looks to have greater spacing as well.
I see that you have removed the search bar entirely. This would be an overkill, I would say, since it works well in other mobile browsers, even Opera Mobile (which does not filter the site through Opera server when you’re on WiFi). Opera Mini users account for less than 10% of the mobile browser market share.
Viewing 8 posts - 1 through 8 (of 8 total)
- You must be logged in to reply to this topic.