Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to enable an auto-suggest form field appear over the top of a table?

Posted on 2011-09-25
9
Medium Priority
?
199 Views
Last Modified: 2012-05-12
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.


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

Open in new window

0
Comment
Question by:evibesmusic
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 15

Expert Comment

by:Eyal
ID: 36597159
can you give us a working site that shows the problem?
0
 
LVL 18

Accepted Solution

by:
Rartemass earned 2000 total points
ID: 36597245
Z index should resolve this.
For a start z-index ONLY works on positioned elements. The three options for the position attribute are:
absolute, relative, and fixed.
You have position:static; in your code, which isn't a valid option.
Change those to position: fixed; and then apply the z-index to those elements.

The z-index with a high number will be positioned above any lower number.
Here are the details of the attribute:
http://www.w3schools.com/cssref/pr_pos_z-index.asp
0
 

Author Comment

by:evibesmusic
ID: 36597258
@Eval:

I can't but here are two screen shots...

The first shot shows how the table sits when the auto suggest field is not enabled:

Shot one

Shot two
0
Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

 

Author Comment

by:evibesmusic
ID: 36597278
@All:

I apologize but, I can't have a static positioning of the table element because the table is dynamically generated with records.
0
 
LVL 18

Assisted Solution

by:Rartemass
Rartemass earned 2000 total points
ID: 36597289
Then change the table element to have the position: relative; attribute.
Without a position attribute, you can't use z-index, which is designed for this kind of thing.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36597294
This article may help you with understanding positioning and what type to set on the table:
http://www.w3schools.com/css/css_positioning.asp
0
 

Author Comment

by:evibesmusic
ID: 36597307
@Rartemass:

Thank you.  Your suggestions worked. Dynamic table element now has the 'relative' attribute, suggestions element uses the 'static' attribute.  Work.

Cheers.
0
 

Author Closing Comment

by:evibesmusic
ID: 36597312
Thanks.
0
 
LVL 18

Expert Comment

by:Rartemass
ID: 36597320
Good to hear its all working.
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to dynamically set the form action using jQuery.

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question