[SOLVED] Border with AjaxSearch 1.8.1

I’ve installed AjaxSearch 1.8.1 which comes with the upgrade to modx 0.9.6.3.

In this new version I get a border around the search field and button, which wasn’t there before.

How can I get rid of this border?

Already looked into the wiki and tried some css, but without any result.

I’ve added pics from 1.7.1 and 1.8.1 to illustrate the problem.

The main difference comes from the use of the <fieldset> tag:

<form [+as.formId+] action="[+as.formAction+]" method="post">
<fieldset>
<input type="hidden" name="advSearch" value="[+as.advSearch+]" />
<label for="ajaxSearch_input">
<input id="ajaxSearch_input" class="cleardefault" type="text" name="search" value="[+as.inputValue+]"[+as.inputOptions+] />
</label>
<label for="ajaxSearch_submit">
<input id="ajaxSearch_submit" type="submit" name="sub" value="[+as.submitText+]" />
</label>
</fieldset>
</form>

May be your css defines the frame of this tag

Thanks you for your quick answer.

As far as I know, my css doen’t define anyting for the frame.

Already tried border:none and border:hide, but the frame stays.

I’m probably missing something, but what css code should I use to get rid of the frame?

Or is there a way to use a template without the <fieldset> tag?

Try: I use that for the AS demo site

Fieldsets are framed by default in CSS they are supposed to be. They are typically broken at the top by a legend element. Fieldset is not a required element and could be dropped since its purpose is not to encapsulate form fields but groups of them.

In strict doc type they are required I think: http://www.8164.org/xhtml-strict/
But not in transitional!?

//Sorry you answed it and I didnt read

It seems for strict it has to be there??

Quote from: mrhaw at Dec 28, 2008, 07:58 PM

In strict doc type they are required I think: http://www.8164.org/xhtml-strict/
But not in transitional!?

It seems for strict it has to be there??

IIRC, the only requirement is that <input> tags have to be inside a block element. It doesn’t have to be <fieldset>. Replacing <fieldset> with <div> should make the border go away.

@coroico: fieldset {border: none} did the trick. Thanks 

@mrhaw: FYI I use xhtml transitional.

@BobRay: I don’t know if I can use a template with AS to replace <fieldset> with <div>.

Would like to know if using a template is possible, otherwise it would mean the snippetcode must be hacked to get rid of the <fieldset> tags.

The ’problem’ with fieldset {border: none} is that IE and FF now use a different margin. Since the search field should be lined up to the left with the logo of my site, I’ll have to program two different left margins for IE and FF. With <div> instead of <fieldset> that would not be necessary.

I don’t know if I can use a template with AS to replace <fieldset> with <div>

Replace <fieldset></fieldset> by <div></div> will not impact the Ajaxsearch behaviour.

Would like to know if using a template is possible

YES, you could change the template. Simply keep the PHx logic and the main PHx data that you need.

Okay, found out how to do this: just had to change the layout.tpl.html file in the ajaxSearch/templates directory.

Thought I had to make a chunk and use some &tpl parameter, but I was thinking the wrong way

Thank you for helping me out here. It’s much appreciated