[Resolved] text in search bar in IE

Home Forums Support text in search bar in IE

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #83505
    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?

    #83578
    Tom
    Lead Developer
    Lead Developer

    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!

    #84262
    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.

    #84263
    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.

    #84278
    morriscountynj

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

    #84283
    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)

    #84347
    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 🙂

    #84349
    Tom
    Lead Developer
    Lead Developer

    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!

    #84357
    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 🙂

    #84362
    Tom
    Lead Developer
    Lead Developer

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

    Thanks for bringing it to my attention! 🙂

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.