asked on

The AutoCompleteExtender does not show below textbox but in a different position

Tha autosuggest part is working fine. The problem is that auto suggest box shows in a different place altogether and not below my textbox but vertically above the box. If I scroll up or down and then click to autocomplete, its at a different vertical position again. I am also going to have autoCompleteExtenders for other textboxes so its getting very messy.

I dont know if it makes any difference but i am using tables and and this is sitting basically inside a <td> I am also attaching a screenshot of this and some code for the autocomplete portion. Thanks!

<asp:textbox id="txtContentsCommodity" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox>
<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" 
ServicePath="../Services/WebService.asmx"
ServiceMethod="FindItem"
MinimumPrefixLength="1"
TargetControlID="txtContentsCommodity">
</cc1:AutoCompleteExtender>

Open in new window

autocomplete-shot.gif

MrAgile

HI There,

Try to do it without tables and see what the effect is. I'm not sure how familar with css you are. Here is some code anyway. There is also a link to an article about table less form layouts.

I'm not sure how much time you have, I think that knowing css well is important for any web developer.

Sean

http://www.alistapart.com/articles/practicalcss/

<fieldset style="width: 80%; margin-left: 10px;">
<legend>Registration Details</legend>
<ol>
<li>
<label for="First Name">
First Name
<asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ErrorMessage="*" ControlToValidate="txtFirstName" ValidationGroup="baby"></asp:RequiredFieldValidator></label>
<asp:TextBox ID="txtFirstName" runat="server" MaxLength="100" CssClass="txtBox" Style="width: 80px;"></asp:TextBox>
</li>
<li>
<label for="Last Name">
Last Name
<asp:RequiredFieldValidator ID="rfvLastName" runat="server" ErrorMessage="*" ControlToValidate="txtLastName" ValidationGroup="baby"></asp:RequiredFieldValidator></label>
<asp:TextBox ID="txtLastName" runat="server" MaxLength="100" CssClass="txtBox" Style="width: 80px;"></asp:TextBox></li>
<li>
<label for="Email Address">
Email
<asp:RequiredFieldValidator ID="rfvEmailAddress" runat="server" ErrorMessage="*"
ControlToValidate="txtEmailAddress" ValidationGroup="baby"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExEmail" runat="server" ControlToValidate="txtEmailAddress"
Display="Dynamic" ErrorMessage="Email Required" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator></label>
<asp:TextBox ID="txtEmailAddress" MaxLength="250" runat="server" CssClass="txtBox"
Style="width: 80px;"></asp:TextBox></li>
<li>
<asp:LinkButton ID="lnkRegister" runat="server" OnClick="lnkRegister_Click" ValidationGroup="baby"><img alt="" src="images/btnregister.png" /></asp:LinkButton>
</li>
</ol>
</fieldset>

kensummers

ASKER

Is there any way around it if I dont do css for this time. I have almost 50 forms built already and changing it at this point is not an option. So i still need to use tables and not change the html structure. Below is a typical row of my example

<TR class="rowcolor2">
																<TD>Commodity Type:</TD>
																<TD>
																	<div><asp:textbox id="txtContentsCommodity" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox>
																	 <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" 
                                                                        runat="server" 
                                                                        ServicePath="../Services/WebService.asmx"
                                                                        ServiceMethod="FindName"
                                                                        MinimumPrefixLength="1"
                                                                        TargetControlID="txtContentsCommodity">
                                                                        </cc1:AutoCompleteExtender></div></TD>
															</TR>
															<TR class="rowcolor1">
																<TD>Special:</TD>
																<TD>
																<asp:textbox id="txtContentsSpecial" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox></TD>
															</TR>

Open in new window

MrAgile

Ok. Can you give me a dummy link to view? I really need to see the generated output.

Sean

kensummers

ASKER

hi steve - i dont have access to an outside web server right now. Instead what i did is attach a zip file which has 3 files - the aspx, the code behind and the actual source code from the .aspx page . Not sure which one you needed so included all 3. hope it makes sense and sorry for the messy html.
AutoCompleteExtender-problem.zip

MrAgile

oK. I hacked your code a little and then tested it with the default ajax implementation of the extender.Now it does appear underneath the textbox but you may need to modify the horizontal postion of the list. It just depends on how finicky you are.

Instead of trying to get your exact code to work I just cut some of it and then pasted it into a default page.

Let me you what you think.

Sean

<%@ Page Language="C#" AutoEventWireup="true" Inherits="CommonPage" Title="AutoComplete Sample" %>
 
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<style>
    .dropdownlst
    {
        background: blue;
    }
</style>
<form runat="server">
<ajaxToolkit:ToolkitScriptManager runat="server" ID="ScriptManager1" />
<table cellspacing="0" cellpadding="0" width="755" border="0">
    <tbody>
        <tr>
            <td width="1" background="images/black_pixel.gif" height="375">
            </td>
            <td valign="top" width="164" background="images/admin_nav_box.gif">
                <table cellspacing="0" cellpadding="0" width="100%" border="0">
                    <tr>
                        <td width="12">
                        </td>
                        <td>
                            <br>
                        </td>
                    </tr>
                </table>
            </td>
            <td valign="top" width="589" bgcolor="#ffffff">
                <table cellspacing="0" cellpadding="15" width="100%" border="0">
                    <tbody>
                        <tr>
                            <td>
                                <p>
                                    <table class="header_title" bordercolor="#cccccc" width="100%" bgcolor="#e5eed1"
                                        border="1">
                                        <tr>
                                            <td>
                                                Add a Load
                                            </td>
                                        </tr>
                                    </table>
                                    <br>
                                    <div align="right">
                                    </div>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <table cellspacing="0" cellpadding="0" width="100%" border="0">
                                    <tbody>
                                        <tr>
                                            <td>
                                                <div align="center">
                                                    <table cellspacing="0" cellpadding="0" width="70%" border="0">
                                                        <tbody>
                                                            <tr>
                                                                <td>
                                                                    <asp:validationsummary id="vsAllErrors" runat="server" font-name="verdana" font-size="8pt"
                                                                        displaymode="bulletlist" headertext="We could not process your request for the following reason(s):"
                                                                        showsummary="True"></asp:validationsummary>
                                                                </td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                </div>
                                                <div align="center">
                                                    <asp:label id="lblMessage" runat="Server" cssclass="labelmessage"></asp:label>
                                                </div>
                                                <asp:panel id="pnlAdmin" runat="server">
													<DIV align="center">
														<TABLE class="inputformLoad" style="BORDER-COLLAPSE: collapse" borderColor="#f0f0f0" borderColorLight="#f0f0f0"
															border="1">
															<TR class="rowcolor1">
																<TD>Select a Carrier:</TD>
																<TD>
																	<asp:listbox id="lstCarrier" runat="server" CssClass="dropdownmenu" Rows="1"></asp:listbox>
																	<asp:requiredfieldvalidator id="lstCarrierReqVal" runat="server" errormessage="Select a Carrier." ControlToValidate="lstCarrier"> *</asp:requiredfieldvalidator></TD>
															</TR>
															<TR class="rowcolor2">
																<TD>Select a Customer:</TD>
																<TD>
																	<asp:listbox id="lstCustomer" runat="server" CssClass="dropdownmenu" Rows="1"></asp:listbox>
																	<asp:requiredfieldvalidator id="lstCustomerReqVal" runat="server" errormessage="Select a Customer." ControlToValidate="lstCustomer"> *</asp:requiredfieldvalidator></TD>
															</TR>
															<TR class="rowcolorspecial">
																<TD colSpan="2" height="27"><B>Location Details</B></TD>
															</TR>
															<TR class="rowcolor1">
																<TD>Origin City:</TD>
																<TD>
																	<asp:textbox id="txtOriginCity" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox>
																	<asp:requiredfieldvalidator id="txtOriginCityReqVal" runat="server" errormessage="Missing Origin City." ControlToValidate="txtOriginCity">*</asp:requiredfieldvalidator></TD>
															</TR>
															<TR class="rowcolor2">
																<TD>Origin State:</TD>
																<TD>
																	<asp:listbox id="lstOriginState" runat="server" CssClass="dropdownmenu" Rows="1"></asp:listbox>
																	<asp:requiredfieldvalidator id="lstOriginStateReqVal" runat="server" errormessage="Select a Origin State." ControlToValidate="lstOriginState">*</asp:requiredfieldvalidator></TD>
															</TR>
															<TR class="rowcolor1">
																<TD>Destination City:</TD>
																<TD>
																	<asp:textbox id="txtDestCity" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox>
																	
																	
															
																
																	  <ajaxToolkit:AutoCompleteExtender
                runat="server" 
                BehaviorID="AutoCompleteEx"
                ID="autoComplete1" 
                TargetControlID="txtDestCity"
                ServicePath="AutoComplete.asmx" 
                ServiceMethod="GetCompletionList"
                MinimumPrefixLength="1" 
                CompletionInterval="1000"
                
                EnableCaching="true"
                CompletionSetCount="20"
                 CompletionListCssClass="dropdownlst"
                DelimiterCharacters=";, :">
                <Animations>
                    <OnShow>
                        <Sequence>
                            <%-- Make the completion list transparent and then show it --%>
                            <OpacityAction Opacity="0" />
                            <HideAction Visible="true" />
                            
                            <%--Cache the original size of the completion list the first time
                                the animation is played and then set it to zero --%>
                            <ScriptAction Script="
                                // Cache the size and setup the initial size
                                var behavior = $find('AutoCompleteEx');
                                if (!behavior._height) {
                                    var target = behavior.get_completionList();
                                    behavior._height = target.offsetHeight - 2;
                                    target.style.height = '0px';
                                    
                                }" />
                            
                            <%-- Expand from 0px to the appropriate size while fading in --%>
                            <Parallel Duration=".4">
                                <FadeIn />
                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />
                                
                            </Parallel>
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <%-- Collapse down to 0px and fade out --%>
                        <Parallel Duration=".4">
                            <FadeOut />
                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />
                        </Parallel>
                    </OnHide>
                </Animations>
            </ajaxToolkit:AutoCompleteExtender>
																	
																	</TD>
															</TR>
															<TR class="rowcolor2">
																<TD>Destination State:</TD>
																<TD>
																	<asp:listbox id="lstDestState" runat="server" CssClass="dropdownmenu" Rows="1"></asp:listbox>
																	<asp:requiredfieldvalidator id="lstDestStateReqVal" runat="server" errormessage="Select a Destination State."
																		ControlToValidate="lstDestState">*</asp:requiredfieldvalidator></TD>
															</TR>
															
															<TR class="rowcolor1">
																<TD>Actual Pick-up Date:</TD>
																<TD>
																	<asp:textbox id="txtActualPickupDate" runat="server" CssClass="TextboxMedium" maxlength="100"></asp:textbox>
																	<asp:requiredfieldvalidator id="txtActualPickupDateReqVal" runat="server" errormessage="Missing Actual Pick Date."
																		ControlToValidate="txtActualPickupDate"> *</asp:requiredfieldvalidator><A title="Pickup Date from Calendar" onclick="calendarPicker('Form1.txtActualPickupDate');"
																		href="javascript:;"><IMG height="12" src="images/icon_calendar.gif" border="0"></A>
																	<asp:comparevalidator id="txtActualPickupDateReqVal2" runat="server" errormessage="Invalid 'Actual Pick Date'. Must be in the format: MM/DD/YYYY"
																		operator="DataTypeCheck" type="Date" display="None" controltovalidate="txtActualPickupDate">*</asp:comparevalidator></TD>
															</TR>
															<TR class="rowcolor2">
																<TD>Actual Delivery Date:</TD>
																<TD>
																	<asp:textbox id="txtActualDeliveryDate" runat="server" CssClass="TextboxMedium" maxlength="100"></asp:textbox>
																	<asp:requiredfieldvalidator id="txtActualDeliveryDateReqVal" runat="server" errormessage="Missing Actual Delivery Date."
																		ControlToValidate="txtActualDeliveryDate"> *</asp:requiredfieldvalidator><A title="Pick Date from Calendar" onclick="calendarPicker('Form1.txtActualDeliveryDate');"
																		href="javascript:;"><IMG height="12" src="images/icon_calendar.gif" border="0"></A>
																	<asp:comparevalidator id="txtActualDeliveryDateReqVal2" runat="server" errormessage="Invalid 'Actual Delivery Date'. Must be in the format: MM/DD/YYYY"
																		operator="DataTypeCheck" type="Date" display="None" controltovalidate="txtActualDeliveryDate">*</asp:comparevalidator></TD>
															</TR>
															<TR class="rowcolor2">
																<TD>Commodity Type:</TD>
																<TD>
																	<div><asp:textbox id="txtContentsCommodity" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox>
																	</TD>
															</TR>
															<TR class="rowcolor1">
																<TD>Special:</TD>
																<TD>
																<asp:textbox id="txtContentsSpecial" runat="server" CssClass="Textbox" maxlength="300"></asp:textbox></TD>
															</TR>
														</TABLE>
													</DIV>
													<DIV align="center">
														<TABLE cellSpacing="0" cellPadding="0" width="70%" border="0">
															<TR>
																<TD width="198">
																	<P align="right"><BR>
																		
																</TD>
																<TD width="190"><BR>
											</TD>
															</TR>
														</TABLE>
														<asp:label id="lblRoleID" Visible="false" Runat="server"></asp:label>
														<asp:label id="lblMaxLoadID" Visible="False" Runat="server"></DIV>
												</asp:panel>
                                            </td>
                                        </tr>
                                </table>
                            </td>
                        </tr>
                </table>
            </td>
            <td width="1" background="images/black_pixel.gif">
            </td>
        </tr>
</table>
 
<script type="text/javascript">
                // Work around browser behavior of "auto-submitting" simple forms
                var frm = document.getElementById("aspnetForm");
                if (frm) {
                    frm.onsubmit = function() { return false; };
                }
</script>
 
<%-- Prevent enter in textbox from causing the collapsible panel from operating --%>
<input type="submit" style="display: none;" />
</form>
</asp:label></DIV></asp:panel></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></FORM>

Open in new window

kensummers

ASKER

I tried but am getting the errors below. i used your version of @register. I think ajax extensions is creating problems.

Error	Unknown server tag 'ajaxToolkit:ToolkitScriptManager'.
 
Error	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'CompletionListCssClass'.
 
Error	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'DelimiterCharacters'.
 
Error	Content ('</Parallel>    </Sequence>                                                             </OnShow>                                                               </Parallel>                                                             </OnHide>                                                               </Animations>') does not match any properties within a 'AjaxControlToolkit.AutoCompleteExtender', make sure it is well-formed.

Open in new window

MrAgile

what version of ms ajax are you using?

MrAgile

you may need to adjust your prefix (<cc1:) similar to what you already had.

kensummers

ASKER

its 2.0 ajax extensions. I changed the prefix to cc1 but didnt make any difference at all. It only wants to work with the one i had before - <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>.

MrAgile

ok that make sense. I'm using .net 3.5.

So use the same control that you had before. And with the exception of the two lines below (in code snippet window) copy everything into your page. Make sure that the required field validator is removed and lets give that a go.

I have attached a screen shot of how the page looks on my server.

Test it with the additional code I have given you and without the required field validator and then let me see the result.

Sean

Sean

CompletionListCssClass
 
DelimiterCharacters

Open in new window

screen.png

kensummers

ASKER

Ok i dont get the first server tag anymore. but it still doesnt like anything inside <Animations></Animations> (see snippet below). And i if i remove this portion then i back to square one.

Error	397	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Animations'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	233	
Error	398	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'OnShow'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	234	
Error	399	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Sequence'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	235	
Error	400	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'OpacityAction'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	237	
Error	401	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'HideAction'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	238	
Error	402	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'ScriptAction'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	242	
Error	403	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Parallel'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	253	
Error	404	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'FadeIn'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	254	
Error	405	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Length'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	255	
Error	406	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'OnHide'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	260	
Error	407	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Parallel'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	262	
Error	408	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'FadeOut'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	263	
Error	409	Type 'AjaxControlToolkit.AutoCompleteExtender' does not have a public property named 'Length'.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	264	
Error	410	Content ('</Parallel>                                                                                  </Sequence>                                                                              </OnShow>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                </Parallel>                                                                              </OnHide>                                                                          </Animations>') does not match any properties within a 'AjaxControlToolkit.AutoCompleteExtender', make sure it is well-formed.	C:\Inetpub\wwwroot\fmnew\admin\load_add.aspx	257

Open in new window

MrAgile

When you go back to square one. did you remove the required field validator? and play around with the placement of the control itself?

kensummers

ASKER

yep there is no required validator for sure. Funny thing is no matter where i put this control , be it the first row or very last one. It always pops up in the same - somewhere in the middle of page position. Depending on how far up/down i have scrolled it might be a bit off , but its never where its supposed to be.

MrAgile

remove all the style sheets in the page as well.

kensummers

ASKER

nah man...i took out the reference to an external style sheet i was using...still nothing.

also for last few mins i have been stripping my form bare, and guess what it works, the only problem is i deleted ALL the rows except the one the control is using. ughhh

ASKER CERTIFIED SOLUTION

MrAgile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kensummers

ASKER

did i mention i hate IE. I do have firefox on my system but just didnt think of trying it on there. As soon as i did , using the oroginal form , no stripping...worked perfectly. i didnt even have to go through ur steps, although they do make sense.

Do you think i should give up on IE or is there any hope other than changing them to css?

MrAgile

Ah. Unfortunately most people use IE. Using css for layout can be challenging at first but once you have the hang of it things get a lot easier. One thing that you will notice is that IE is different for almost everything. Javascript and css are some of the differences.

I use pure css layouts for every website I build. You still have a few quirky behaviors but they are easy to change with used in conjunction with themes & masterpages.

This website is a real gem in relation to explaining technologies (http://www.w3schools.com/). have a poke around.

Sean

MrAgile

one thing we did not try is to increase the spacing between the table rows. try it.

kensummers

ASKER

hey Steve, sorry i was out this weekend or would have replied sooner. I did try to change the height but didn't make any difference. I am just going to stick with Firefox for now and get into css when i get the time. Thanks for ur help!