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

[Manikrag]

Hi Team,

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

I am using an AutoCompleteExt ender 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..
----------------------------

<DIV>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
		<asp:TextBox ID="TextBox1" runat="server" Width="160px"></asp:TextBox>
		<cc1:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" MinimumPrefixLength="1" 
		ServiceMethod="GetVendors" CompletionListItemCssClass="listItem" CompletionListCssClass="completionListElement" CompletionListHighlightedItemCssClass="highlightedListItem" ServicePath="http://webtest.ariba.com/ajax/webservice.asmx" 
		TargetControlID="TextBox1" OnClientItemSelected="Test"> </cc1:AutoCompleteExtender>
		  <asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="Search" />
</DIV>

<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

[Frinavale]

Could you please post the CSS styles applied to the <div>'s you're talking about here?

[Manikrag]

Thanks for responding buddy!

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

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;
}

.highlightedLis tItem

{

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

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

Thanks again,
Manik

[Manikrag]

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..

[Frinavale]

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:bo th"></div>


This will make sure that the top <div> stays at the top and the ones below it say below it.

[Manikrag]

Thanks Frinavale. It is fixed by removing "overflow: hidden;" from

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


Thanks a lot!!
Manik

[Frinavale]

Hmm, guess I was wrong about the float styles.

Glad you solved the problem :)

-Frinny

[Manikrag]

but it was close!! thanks so much for your support!!

You rock!!

[RebeccaLouise]

Hmm, guess I was wrong about the float styles.

Glad you solved the problem :)

-Frinny

Hi,

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

Thanks :)

Bec.

[Manikrag]

Great it helped you too.

[Frinavale]

Hi,

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

Thanks :)

Bec.

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