By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,918 Members | 2,033 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,918 IT Pros & Developers. It's quick & easy.

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

P: 62
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
Share this Question
Share on Google+
10 Replies


Frinavale
Expert Mod 5K+
P: 9,731
Could you please post the CSS styles applied to the <div>'s you're talking about here?
Sep 11 '09 #2

P: 62
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

P: 62
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
Expert Mod 5K+
P: 9,731
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

P: 62
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
Expert Mod 5K+
P: 9,731
Hmm, guess I was wrong about the float styles.

Glad you solved the problem :)

-Frinny
Sep 14 '09 #7

P: 62
but it was close!! thanks so much for your support!!

You rock!!
Sep 14 '09 #8

P: 1
@Frinavale
Hi,

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

Thanks :)

Bec.
Oct 1 '09 #9

P: 62
Great it helped you too.
Oct 1 '09 #10

Frinavale
Expert Mod 5K+
P: 9,731
@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.