[Resolved] text in search bar in IE

[morriscountynj]

I just noticed that when I select the search icon and the overlay comes up, i’m not able to actually see the text I’m typing in IE10 and below. For example here:

http://www.morriscountynjtest.info/humanrelations/

is there a way to fix this?

[Tom]

Hi there,

Do you have some sort of search plugin installed? I’m testing using IE11, which works well on the development site, but it brings up an odd “Enter your search terms” message in your navigation. Whatever it is, it may be interfering in IE10.

I’ll install IE10 in the morning and will do some tests.

Thanks!

[morriscountynj]

The search box label is picking up the “.screen-reader-text” class. Looking at that CSS, it looks like it’s supposed to only be 1px by 1px so it shouldn’t display at all, but on hover or focus this displays:

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar */

i just commented this out – is this necessary to have?

in any case, even commented out, I’m still having the same issue in IE10.

[morriscountynj]

also if this helps, i ended up changing the default search to a different search engine i use using functions.php:

<?php
 
/**
 * Changes the nav to be usa search
 */
if ( ! function_exists( 'generate_remove_default_navigation_search' ) ) :
	add_action( 'after_setup_theme','generate_remove_default_navigation_search' );
	function generate_remove_default_navigation_search()
	{
		remove_action( 'generate_inside_navigation','generate_navigation_search');
	}
endif;

if ( ! function_exists( 'generate_usasearch_navigation_search' ) ) :
	add_action( 'generate_inside_navigation','generate_usasearch_navigation_search');
	function generate_usasearch_navigation_search()
	{
		$generate_settings = wp_parse_args( 
			get_option( 'generate_settings', array() ), 
			generate_get_defaults() 
		);
		
		if ( 'enable' !== $generate_settings['nav_search'] )
			return;
			
		?>
		<form accept-charset="UTF-8" role="search" method="get" id="search_form" class="search-form navigation-search" action="http://search.usa.gov/search">
<div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="✓" /></div>
    <input id="affiliate" name="affiliate" type="hidden" value="morriscountynjgovernment" />
<label class="screen-reader-text" for="query">Enter Search Term(s):</label>
			<input type="search" class="search-field" id="query" name="query" >
			<input type="hidden" name="submit" value="Search" name="commit" />
		</form>
 
		<?php
	}
endif;
?>

not sure if that would make a difference though.

[morriscountynj]

also just tried enabling/disabling my plugins to see if there was a conflict but no go

[morriscountynj]

quick update –

i just did a quick local clean WP install with the parent generatepress theme, enabled the search, and it does the same thign in IE (can’t read or select the text)

[morriscountynj]

JUST SOLVED IT (i think)

it looks like the issue is how IE is rendering
.navigation-search input {line-height:0}

works fine in the other browsers, but in IE it’s hiding the text entirely. In my child theme, I added this to overwrite it
.navigation-search input {line-height:100%;}

and now it seems to be working fine everywhere. whew 🙂

please let me know if you’re seeing this error generally on your end though 🙂

[Tom]

Ha, just as I fixed it!

On my end, I removed this:

padding: 0 15px;

From the .navigation-search input attribute which fixed it.

Can you confirm this works as well? (while having line-height: 0)

Thanks!

[morriscountynj]

that does seem to work (kept the original line-height:0, removed my fix)

are you going to do a re-release of the theme with this fix? just wondering how much code i need to change on my sites 🙂

[Tom]

Excellent – yes, this will be fixed in the 1.2.9 release.

Thanks for bringing it to my attention! 🙂

[Author]

Posts