I’m going to try to keep the code I need to share for my example to a minimum but I’m not 100% sure what is causing this problem.
On the site that I am working on we use search bars in many places in order to reduce the number of selection options from a dropdown list.
The basic look of this
[Dropdown list] <=== [Search Text Field]
Since this is used all over the site I decided to create a component and since this component is used in conjunction with some other components I used a decorator pattern (more or less) to create the component.
As a result there are 2 classes I’m using to create the desired effect. One is literally just a wrapper around the regular activeDropDown list and the other creates the scripts for the ajax needed to use the search bar. The problem I am having is that quite often when using the searchbar, after the dropdown list is repopulated the search field gets bumped down and looks like so.
[Dropdown list]
<=== [Search Text Field]
Is there any way that I can make sure the search field will stay put? I’ll share the code for the classes if needed but I don’t want to bulk of this post with so much code that it scares people away.
my gut tells me that you may have invalid html, double check your code to make sure all tags are closed(or not missing). Inspect the your [Search Text Field] to see why the field drops down.
I was able to solve the problem. The issue was that the search code was being placed after the the error div, so whenever an error was added via the ajax check code was being inserted between the text field and the searchbox, causing it to move. I just needed to adjust my code to make sure that the searchbox was placed before the error code.
