ajaxsearch layout template

We’ve just upgraded www.spiritualoutreach.com to 1.0.0 from 0.9.6 and most has gone very well. However, we noticed the default layout of the ajaxsearch snippet has changed. We had our search input tightly wedged into our upper right banner. It now slightly exceeds the size of the banner andthe various divs goes scrambling across the page to make room - in other words, it looks lousy! The culprit seems to be the Go button is now under the input rather than to its right.

We looked at the layout template expecting it would be simple html and CSS (of which we have only a rudimentary understanding but at least a rudimentary one). Alas, it is not. How would one shorten the input and put the Go button back on the right of the input rather than underneath? We’ve temporarily increased the height of the banner but would prefer to return to the original size. Thanks - John

Take a look at "view source" of your page for the classnames and IDs of the form, and adjust the size of the input field in your CSS. Most likely its ID is ajaxSearch_input, so you would put this in your css file:

or whatever width you need to get it to fit properly.

Hi guys - Gracedman, can you show me how you styled your non ajax search box and results page? I cant find any documentation on how to do this and the current default layout and CSS looks terrible!

Many thanks


dubbs

Thank you once again, Sottwell, for both the specific tip and the guidance on troubleshooting. It worked perfectly:

#ajaxSearch_input {
width: 75%;
}

popped everything back into place - John

Sorry, dubbs, I missed your post. I’ll have to try to remember what I did as it has been a while and this is not what I do for a living at all. You can see the final results at www.spiritualoutreach.com

My template has this within it:


The landing page is simply:


The content section is simply:


The css for content and left are:
#content {
min-height: 250px;
font-size: larger;
line-height: 1.5em;
padding: 0.5em;
padding-bottom: 1em;
}

.left {
margin-right: 250px;
min-width: 250px;
border-right: 6px solid #8d7700;
}

I know it’s not much but I hope it helps - John

Hallo,

I tried to put ajaxSearch & want to use Normal Search. This is my setting :

[!AjaxSearch? &ajaxSearch=`0` &jscript=`jquery` &addJscript=`0` &AS_landing=`8` &ajaxMax=`15` &showMoreResults=`1` &moreResultsPage=`8` &width=10!]

And at my css file :
#ajaxSearch_form {
// color: #444;
// width: auto;
}

#ajaxSearch_input {
width: 135px;
display: inline;
height: 17px;
margin: 0 3px 0 0;
padding: 3px 0 0;
vertical-align: top;
}

#ajaxSearch_submit {
background-color: #000080;
color: #d0d0ff;
font-weight: bold;
display: inline;
height: 22px;
line-height: 22px;
margin: 4px 0 0 0;
}



The problem: Around the input & submit button, there is a box (like border). How to hide it ?

Thanks.
- pedma -

fieldset {border: none}

Hi Coroico,

Thanks for your reply. Sorry for my late reply. I have tried to do this to my css :

#ajaxSearch_fieldset {
border: none
}

It didn’t work.
I tried this also :

#ajaxSearch_form {
....
border: none
}

It also didn’t work.
Where must I put it ?

Thanks.
- pedma -