evibesmusic
asked on
How to enable an auto-suggest form field appear over the top of a table?
Experts,
I am using a jquery script which auto-suggests last names from my database when a user enters a few letters into the form field. This auto suggest field sits above a table of information on my page. I want the suggestions generated from this input field to show on top of the table.
What is happening now is that when I type something into my form field, I get the auto-suggestions but, it pushes the table lower on the page. Instead of pushing the table lower, I want the suggestions to lay on top of the table.
Can anyone help?
I've tried various configs with z-index and position but, I can't figure it out.
I am using a jquery script which auto-suggests last names from my database when a user enters a few letters into the form field. This auto suggest field sits above a table of information on my page. I want the suggestions generated from this input field to show on top of the table.
What is happening now is that when I type something into my form field, I get the auto-suggestions but, it pushes the table lower on the page. Instead of pushing the table lower, I want the suggestions to lay on top of the table.
Can anyone help?
I've tried various configs with z-index and position but, I can't figure it out.
//THIS IS THE CSS THAT GOVERNS THE SUGGESTION BOX
@charset "utf-8";
.suggestionsBox {
position: relative;
left: 30px;
margin: 10px 0px 0px 0px;
width: 200px;
background-color: #212427;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 2px solid #000;
color: #fff;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #659CD8;
}
//HERE IS MY CODE WHICH GENERATES THE AUTO SUGGEST MENU WHEN A USER TYPES IN A FEW LETTERS, IT WORKS FINE
echo'<input type="text" size="30" value="" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" />
<div class="suggestionsBox" id="suggestions" style="display:none; position:static; z-index:100;">
<img src="../images/upArrow.png" style="position: static; top: -12px; left: 10px; z-index:1000;" alt="upArrow" />
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>';
//THIS IS AN EXAMPLE OF A TABLE THAT I AM USING
echo'<table style="position:static; z-index:100;">';
echo'<tr><td></td></tr>';
echo'</table>';
//I NEED HELP WITH THE CSS SO THAT THE AUTO MENU DOES NOT PUSH THE TABLE LOWER ON THE PAGE
can you give us a working site that shows the problem?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
ASKER
@All:
I apologize but, I can't have a static positioning of the table element because the table is dynamically generated with records.
I apologize but, I can't have a static positioning of the table element because the table is dynamically generated with records.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
This article may help you with understanding positioning and what type to set on the table:
http://www.w3schools.com/css/css_positioning.asp
http://www.w3schools.com/css/css_positioning.asp
ASKER
@Rartemass:
Thank you. Your suggestions worked. Dynamic table element now has the 'relative' attribute, suggestions element uses the 'static' attribute. Work.
Cheers.
Thank you. Your suggestions worked. Dynamic table element now has the 'relative' attribute, suggestions element uses the 'static' attribute. Work.
Cheers.
ASKER
Thanks.
Good to hear its all working.