Instant Search

[Shapirosupply]

You sure you uploaded file, i can't see instant search in source code.

Sorry, I had 'em in the wrong directory. I just moved 'em and it does look like its working now but the results don't look quite right. It looks like its trying to cram many results into the window..

[AyoobG]

Na, thats because your product names are very long, and they are being push under the next items in the list, you can hide these letters by opening the instantSearch.js file and changing:

.resultsContainer a {
	display : block;
	color : #000;
	background-color : #fff;
	padding : 0.1em 0.4em;
	text-decoration : none;
	overflow:hidden;
	height:18px;
	
}

into:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:100%;
line-height:100%;
}

or experiment with different values of "height" and "line-height".

Sorry, I had 'em in the wrong directory. I just moved 'em and it does look like its working now but the results don't look quite right. It looks like its trying to cram many results into the window..

[Shapirosupply]

Oh.. I see. I'm not finding that code in instantsearch.js though.. maybe another js file? I'll look around. Thanks for your help.

[familynow]

Can anyone help with css please? I can't figure out how to match the rest of my site. I'd like the suggestion list to match my header dropdown.

familynowDOTca

[Shapirosupply]

Na, thats because your product names are very long, and they are being push under the next items in the list, you can hide these letters by opening the instantSearch.js file and changing:

.resultsContainer a {
	display : block;
	color : #000;
	background-color : #fff;
	padding : 0.1em 0.4em;
	text-decoration : none;
	overflow:hidden;
	height:18px;
	
}

into:

.resultsContainer a {
display : block;
color : #000;
background-color : #fff;
padding : 0.1em 0.4em;
text-decoration : none;
overflow:hidden;
height:100%;
line-height:100%;
}

or experiment with different values of "height" and "line-height".

Still can't find this code anywhere.. any other suggestions?

[familynow]

ShapiroSupply, it's instantsearch.css under your themes' css directory in case you're still looking.

Thanks AyoobG. That's much better.

My next Q is where the heck do I apply this[1]. When I apply it to .resultsContainer a only the hover and border are rounded and transparent. I want to apply this to the whole background. I feel like I'm never gonna get this css stuff [ *-) ]


references
[1]
background-color: #0D474E;
border-radius:3px 3px 3px 3px;
-moz-border-radius:3px 3px 3px 3px;
-webkit-border-radius:3px 3px 3px 3px;
opacity:0.95; filter:alpha(opacity=95);

[bigstore]

I moved my search bar up above my navigation and I've been playing with the css file for way too long. Here is what it looks like. I'm actually thinking of disabling it for good.


Playing with Line-height and height, width seems to bring me closer but doesn't solve the issue.

.resultsContainer {
z-index: 10000;
text-align: left;
vertical-align: bottom;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: ;
background: white;
width: auto;
border: 1px solid #CCC;
background-color: white;
margin: 0;
margin-top: 17px;
margin-left: 0px;
height: 25px;
line-height: 12px;
}

[familynow]

I've got mine technically preforming the way I want with height & width : 100%; but I can't get the rest of the css to play nice ie the background, transparency and border-radius. No matter where I put them I don't get the results I want. I suspect I need to pull some of the css out of the default instantsearch.css and specific the elements but I just can't seem to grasp how to do that.

I did line-height : 20px; and a font of 13px to give lots of room everything kinda balanced out.

[lindasdd]

I moved my search bar up above my navigation and I've been playing with the css file for way too long. Here is what it looks like. I'm actually thinking of disabling it for good.


Playing with Line-height and height, width seems to bring me closer but doesn't solve the issue.

.resultsContainer {
z-index: 10000;
text-align: left;
vertical-align: bottom;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: ;
background: white;
width: auto;
border: 1px solid #CCC;
background-color: white;
margin: 0;
margin-top: 17px;
margin-left: 0px;
height: 25px;
line-height: 12px;
}

Why not expand the width. It won't match the search box, but that really shouldn't matter.

-lindasdd

[lindasdd]

Two quick issues:

1) The MOD works for me on the advanced search page, but not in my header search. Should I assume that is just a JSCRIPT conflict issue? Although I would think if that was the case it would happen in both spots (since the header search doesn't work on the advanced search page either.)

2) Is there any way to moderate the number of returns displayed? I'd like more potential results displayed. For instance typeing in the letter 'S' should return a large set on a big store, not just 1-2 items.

Thanks,
lindasdd