Autocomplete Display issue

Feb 17, 2009 at 2:52 AM
Hello,

First off, thanks for these controls they are great and easy to implement and work with. But I seem to be having a little trouble with the autocomplete control when they are stacked in a table above one another. Im working on a flight scheduling application and trying to use the autocomplete to lookup airports. I have a table with multiple rows and in each row there needs to be a From and To autocomplete. The problem is that the autocomplete textbox in row 2 sits on top of the results that come back from the autocomplete textbox in row 1, therefore the user is not able to see or select the results. Is there a easy way to fix this issue because I would really like to use this control, it does everything else I need it to do.

Example:
-table-
    -tr-
        -td- 1 -/td-
        -td- Autocomplete Textbox -/td-
    -/tr-
    -tr-
        -td- 2 -/td-
        -td- Autocomplete Textbox -/td-
    -/tr-
-/table-

(Wasn't sure if I could paste html in here so I did the above instead.)

Thanks and let me know.

chad
Coordinator
Feb 17, 2009 at 7:11 AM
Chad, thanks for reporting the issue!

It would be really usefull if you could send a small demo with the wrong behaviour described.
You can send an email to raul.popescu at gmail.com or to dev at yuiasp.net.

It would be really easy for me to debug the issue you described afterwards!

Thanks,
Raul
Feb 17, 2009 at 7:05 PM
Raul,

I sent you an email. Containing a test project to show you what is occurring. If you could let me know how to solve the issue that would be great. Also, how do I stylize the textbox like change the font size and hover color of the autocomplete. And is there a way to make the autocomplete dropdown width larger than the textbox width.

thanks for all the help.
Coordinator
Feb 17, 2009 at 9:26 PM
Got your email.

" how do I stylize the textbox...": using css. Put a css class on the control, eg: myCustomClass, then, using css selectors, apply the class to the textbox like this: .myCustomClass input {/*your style here*/}

" is there a way to make the autocomplete dropdown width larger": of course, using css to override the default widths.
for the first autocomplete, this should do the work: #ctl00_ContentPlaceHolder1_ctrlAuto2_divContainer {width: 400px}. This is ugly, and I am positive there are also other solutions, like setting the width of the entire control to something big, like 500px, then constraining the textbox to something smaller, like 200px.

About your original problem, you can solve it by setting the z-index of the YUIAsp.Net control to something big.

Here's what worked for me: 

<yuinet:AutoComplete style="z-index:999"
                            ID="ctrlAuto2" ....


Enjoy,
Raul
Feb 17, 2009 at 9:59 PM
yea, I tried that and it works with if the html on the page is static. But Im going to be using the autocomplete in a Datalist that will have more than one row. Is there a way that the control will always be on top of whatever controls are underneath it. So that it doen't matter where I use.

thanks,
Coordinator
Feb 18, 2009 at 7:41 AM
you can do that from code behind too..

control.Style.Add("z-index", "900");

So you could use ItemDataBound event to put it on every autocomplete on the DataList...