Forum Discussion

JoeyMcDaniel's avatar
JoeyMcDaniel
Mentor
11 years ago

Customized search bar not working in IE

I've created a custom header for my community.  Part of that customization is a new look and feel for the default search bar.  Part of the customization is the removal of the search button.  Users in FireFox and Chrome are able to search, but in IE hitting enter does not result in a search being completed.

 

Have you seen this before? If so, how did you fix it?

 

HTML

 

<div class="search-persistent">
	  <div id="lia-searchform1" class="SearchForm lia-search-form-wrapper lia-mode-default lia-component-common-widget-search-form">
		   <@component id="common.widget.search-form" hideGranularity="true" defaultToCommunity="true"/>
	  </div>
</div>

 CSS

 

#lia-body .lia-content .lia-form input[type="text"] {
border: none;
width: 260px;
}

.lia-component-common-widget-search-form {
width: 260px;
}

.lia-autocomplete-header {
color: #c0c0c0;
}

.lia-autocomplete-container {
font-family: helvetica, sans-serif;
}
.lia-autocomplete-container a {
font-family: helvetica, sans-serif;
color: #269dcf;
}

.lia-autocomplete-container ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}

.lia-component-common-widget-search-form input.search-input {
border: none;
background-color: #fff;
}

.lia-button-searchForm-action {
border: none;
border-bottom-left-radius: .3em;  
border-bottom-right-radius:.3em;    
border-top-left-radius:.3em;   
border-top-right-radius:.3em;  
background-color: #269dcf;
color: #fff;
padding: 2px 6px;
visibility: hidden;
}

.search-persistent {  
position: relative;  
float: right;  
color: #fff;  
clear: none;  
min-width: 301px;  
border: 0px solid #fff;  
padding: 6px 40px 0px 0px;  
margin: 0;  
}

#lia-searchform input:focus {
outline: none;
}

#lia-searchform1 {  
-webkit-transition:width 100ms linear;  
display:block;  
overflow:hidden;  
text-overflow:ellipsis;  
transition:width 100ms linear;  
white-space:nowrap;  
width:300px;  
line-height:normal;  
color: transparent;  
-webkit-appearance:textfield;  
background-color:#fff;  
background-image:url(data&colon;image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAANCAYAAABy6+R8AAAAb0lEQVR42p2RMQ7AIAhFWXsG1h7Gtffo6urqyJGpwyetomnwJ38BH/wgfZSaS7PABbVOqkqm3Fzx6IQTatlDb5PJi21YBy1iuNgjJIgzFXqyCcXj1Z1DXNGTiw01aP252DCCgH7Fk41h8KaAGMDxADnaOPucd/m3AAAAAElFTkSuQmCC);  
background-position:7px 6px;  
background-repeat:no-repeat no-repeat;  
border:none;  
border-bottom-left-radius:5em;  
border-bottom-right-radius:5em;  
border-top-left-radius:5em;  
border-top-right-radius:5em;  
box-shadow:rgba(0, 0, 0, 0.298039) 1px 2px 3px inset;  
box-sizing:border-box;  
color:#333333;  
font-family:inherit;  
font-size:inherit;  
height: 26px; 
line-height:1.71428571428571;  
margin:8px 0;  
padding:2px 10px 2px 25px;  
vertical-align:baseline;  
}

 

  • cike's avatar
    cike
    Champion
    11 years ago

    Hey JoeyMcDaniel ,

     

    I had the same problem you described above.

    I solved the problem by adding a small piece of JavaScript to my custom search component which listens for the keyup-event.

     

    $("#lia-body .lia-content .lia-search-input-message").keyup(function(e) {
       if(e.which == 13) {
      var search_text = $(this).val();

      if (search_text) {
         var search_text_en = encodeURI(search_text);
         var search_url = "/t5/forums/searchpage/tab/message?q=" + search_text_en;
	
             window.open(search_url, "_self");
      }
   }
    }

     

    I build the search url myself and pass this value to the window.open() function.

     

    Best regards

    Christian