469,957 Members | 2,665 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,957 developers. It's quick & easy.

<DIV> tag not allowing AutoCompleteExtender's autoDrop down to appear fully

Hi Team,

I searched a lot on this but could not find anything, so I am posting it here.

I am using an AutoCompleteExtender in a user control which is in a master page. The page layout is designed byDIV tags. My code in that user control is somehting like..
----------------------------
Expand|Select|Wrap|Line Numbers
  1. <DIV>
  2. <asp:ScriptManager ID="ScriptManager1" runat="server" />
  3.         <asp:TextBox ID="TextBox1" runat="server" Width="160px"></asp:TextBox>
  4.         <cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1" 
  5.         ServiceMethod="GetVendors" CompletionListItemCssClass="listItem" CompletionListCssClass="completionListElement" CompletionListHighlightedItemCssClass="highlightedListItem" ServicePath="http://webtest.ariba.com/ajax/webservice.asmx" 
  6.         TargetControlID="TextBox1" OnClientItemSelected="Test"> </cc1:AutoCompleteExtender>
  7.           <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="Search" />
  8. </DIV>
  9.  
  10. <div>Rest of the page with multiple div tags</div> 
----------------------------
When I type anything in the textbox, the auto dropdown does not appear fully becasue 2nd DIV tag hides or overlap the dropdown.

Please help me,

Thanks,
Manik
Sep 11 '09 #1
10 5180
Frinavale
9,735 Expert Mod 8TB
Could you please post the CSS styles applied to the <div>'s you're talking about here?
Sep 11 '09 #2
Thanks for responding buddy!

Sure, here we go!
-----------------------
<style type="text/css">
.completionListElement
{

visibility : 0;
margin : 0px! important;

background-color : white;
color : black;

border : solid 1px gray;
cursor : hand;

text-align : left;
list-style-type : none;

font-family : Verdana;
font-size: 11px;

padding : 0;
z-index : 20;

}

.listItem

{

padding: 1px;
z-index: 20;

background-color: white;
}

.highlightedListItem

{

color : black;
FONT-WEIGHT: bold;
background-color: #D7E4F3;

padding : 1px;z-index : 20;
}
</style>
------------------------

Thanks again,
Manik
Sep 11 '09 #3
Sorry I misunderstood it. No CSS for DIV tags, DIV tags are as following..


<div style="float: left; border: px #c0c0c0; background-color:#cccccc; width:100%;">

<div style="float: left;"></div>


<div style="float: right; height: 60px; overflow: hidden; width: 360px;">
<div style="float: right; height: 35px; padding: 2px 5px 10px 1px;"> </div>

and goes on..
Sep 11 '09 #4
Frinavale
9,735 Expert Mod 8TB
I'm think it has to do with the float styles.
Between the top <div> and the rest of the content place the following

<div sytle="clear:both"></div>


This will make sure that the top <div> stays at the top and the ones below it say below it.
Sep 11 '09 #5
Thanks Frinavale. It is fixed by removing "overflow: hidden;" from

<div style="float: right; height: 60px; overflow: hidden; width: 360px;


Thanks a lot!!
Manik
Sep 14 '09 #6
Frinavale
9,735 Expert Mod 8TB
Hmm, guess I was wrong about the float styles.

Glad you solved the problem :)

-Frinny
Sep 14 '09 #7
but it was close!! thanks so much for your support!!

You rock!!
Sep 14 '09 #8
@Frinavale
Hi,

Clearing floats didn't not have solved the original problem, But it solved mine.

Thanks :)

Bec.
Oct 1 '09 #9
Great it helped you too.
Oct 1 '09 #10
Frinavale
9,735 Expert Mod 8TB
@RebeccaLouise
Well at least it helped someone :)

Normally with these kinds of problems it's always some css style setting that is the culprit of the problem.

Cheers!

-Frinny
Oct 1 '09 #11

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

61 posts views Thread by Toby Austin | last post: by
28 posts views Thread by Kent Feiler | last post: by
2 posts views Thread by Richard Maher | last post: by
reply views Thread by rainxy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.