[SOLVED] Attach.. suggestion box to input box

[Zane]

That's right, attach.

 

I"m having a problem figuring out this secret of attaching this box to another box above whilst the above box has something floating beside...yeah that didn't make any sense to me either.

 

So I took a snapshot(s).

..check them out

 

Now you see I have a Select Builder dropdown and then a textbox beside it.

my code for that looks like this

        
                Select Builder ▼
                        
                        
                
        
        
            

            
                  
                      AJAXX Textbox Suggestion
                  
            
    

 

My question is now.  What kind of CSS magic am I looking to do to get the AJAXX suggestion box to appear directly under the textbox (all the tme)...no matter if the dropdown is clicked or not.  Because now when I click it.  Well you can just see from the picture.

 

[attachment deleted by admin]

[xtopolis]

I don't want to offer a premature solution... but applying float: left; to both container boxes seemed to push the suggestion box to the proper side leaving space for the dropdown... however without your current css code for it, I can't be sure that would help you.

 

Post your css / full html if you haven't solved it already.

[SuperBlue]

I would recommend that you apply position: relative; to the containing element of the selectbuilder division, and then apply position: absolute;top:0;left:0; to your selectbuilder division.

 

This would in theory make sure that the dropdown stays in place, even when in focus or clicked. But depending on the script used, i cant be sure. You might also need to apply a higher z-index to the selectbuilder division.

[Zane]

ok, so I did what you said blueboden.

 

My idea at first was to have them like that. where the dropdown doesn't push everything down, but I'm having trouble with that.  I got the textbox attached successfully, but I try to make the "containing divisions" relative, and the contents absolue I get the following attached image

 

I'm not too up to snuff on how position works.  I have a slight idea but, I couldn't consider it a sound one.

 

I have to divs now, directly beside another.

each of them are floated left and positioned relative.   Inside each on is an absolutely positioned div.  Nevertheless, the divs smash together.

 

My HTML

            
                    Customer's Full Name


Select Builder ▼




                    
                        
                        
                          
                            Suggestion
                            Suggestion
                          
                        
                    
            

 

and a little bit of the CSS

#selectbuilder, #namespace {
float: left;
margin: 0px;
padding: 0px;
}
#selectbuilder {
border:thin solid;
padding:2px;
padding-right:3px;
position:absolute;
top:0;
left:0;
}
#selectbuilder:hover {
background-color:white;
cursor:pointer;
}
#suggestions {
position:relative;
background-color: white;
width:100%;
margin-left:6px;
border:thin solid #809FB3;
border-top: none;
}
#suggestions ul {
padding: 0px;
margin: 0px;
list-style-type: none;
}
#namespace {
width:42%;
margin: 0px 0px 0px 8px;
}

Any ideas why the divs are pressing together like they are in the attachment

 

 

EDIT: I attached another image showing what happens if I click the sliver of the "Select Builder" button.  It seems position absolute is working, but namespace and selectbuilder's container are colliding

 

 

[attachment deleted by admin]

[Zane]

Awesome, was playing around with position and got it to work

 

            
                    Customer's Full Name
                  
                           Select Builder ▼
                                                      style="
display:none;
padding: 0px;
margin: 0px;
list-style-type: none;
height:400px;
overflow:scroll;
position:absolute;
top:30px;
left:0;
border:thin solid black;
z-index:300;
background-color:white;
                           "
                            >
                           
                  
                    
                        
                        
                          
                            Suggestion
                            Suggestion
                          
                        
                    
            

picture below

 

Thanks for you guys' 2 cents, it helped me out.

 

[attachment deleted by admin]