Need Help Positioning a suggest list 1

[LyndonOHRC]

Because it's so complex I've included a screen shot of the form I'm trying to style a suggest list for.

The element (horse) where I've typed Suggest List Below is where I'd like to display my ajax generated list. It will fire the ajax routine after the 3rd character is typed and attempt to look up a horse.

I would like to have it positioned directly below the input element on top of all the other objects.

The form is structured from nested tables and I've tried placing a row just below the element and toggeling the display from none to block but that method pushes down the other rows when I set the position property of the table cell. If I use position: absolute no innerHTML is ever displayed. The other options all push the other rows down instead of displaying over them.

I've also tried placing a hidden <div > after the input element and it behaves the same way. I guess my problem may be that I'm using tables.

I hope this makes sense and I appreciate any help...

Style Sheet, I've tried all of the position property values, this is the most recent attempt.

.suggestList
{
	width: 302px;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	border: 1px solid #8996B5;
	background-color: #FFFFFF;
	position: absolute;
	overflow:auto;
	list-style-type: none;
	/*height: 500;*/
}

Client Side JavaScript, pretty simple, just toggeling the list off and on.

function ajaxFunction(inputValue,elem) {
		if (inputValue.length > 2){
			document.getElementById("pickList"+elem).style.display="inline";
			document.getElementById("pickListMargin"+elem).style.display="inline";
			document.getElementById("pickList"+elem).innerHTML="<br /> List ";
		}
		else {
			document.getElementById("pickListMargin"+elem).style.display="none";
			document.getElementById("pickList"+elem).innerHTML="";
			document.getElementById("pickList"+elem).style.display="none";
		}
	}
	
	function closeIt(elem){
		document.getElementById("pickListMargin"+elem).style.display="none";
		document.getElementById("pickList"+elem).innerHTML="";
		document.getElementById("pickList"+elem).style.display="none";
	}

Client Side Html, my current attempt using the hidden row...

<tr>
											<td>
												<div align="right">Horse</div>
											</td>
											<td>
												<input required="Yes" message="Horse Name Required" name="RSWinHorseName" id="RSWinHorseName" size="30" maxlength="100" value="" onkeyup="ajaxFunction(this.value,'RSWinHorseName');" autocomplete="off" onblur="closeIt('RSWinHorseName');">
											</td>
											<td>
												<div align="right">OBN</div>
											</td>
											<td>
												<INPUT TYPE="Text" NAME="RSWinOBN" ID="RSWinOBN" SIZE="7" MAXLENGTH="7" VALUE="">
											</td>
										</tr>
										<tr>
											<td id="pickListMarginRSWinHorseName" style="display: none;"></td>
											<td id="pickListRSWinHorseName"  colspan="3"  style="display: none;" class="suggestList">
												<br>List<br> <!--- populate a <UL> here with horse name suggest items --->
											</td>
										</tr>

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[vacunita]

Seeing as your using tables, you are limited to using an absolutely positioned div.

Now the style should be applied to the div itself, not a cell its in, and the div should be in the same cell as the target drop down. The Table should have no positioning whatsoever.

to exemplify, try this code:

#suglist{
display:none;
width:143px;
height:200px;
position:absolute;
border:2px solid #DDDDDD;
background-color:#88DDEE;
}

function display_sugglist(mybox){
var dd=document.getElementById('suglist');
dd.style.top=mybox.style.bottom;
dd.style.left=mybox.style.left;
dd.style.display='block';
}

<table border=0 style="border:1px solid #DDDDDD;">
<tr><td><input type="text" name="textbox" onkeypress="display_sugglist(this);"><div 

id="suglist">The suggestion list will appear here</div></td><td>Content</td><td><input 

type=text name="otherstuff"></td></tr>
<tr><td>More content here</td><td>Text goes here</td><td>This should not e altered</td></tr>
<tr><td><input type="text" name="text2"></td><td><input type=button value="Click 

Here"></td><td>Other content</td></tr>
</table>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[LyndonOHRC]

Phil, thank you so very much! Your explination is perfect. I can style the ajax search elements on this form from here.

May I ask for further explanition on the div's position?

When I display your example page (in IE8) the suggest box is to the right of and same top margin as the input elem named textbox. The position values you set are:

dd.style.top=mybox.style.bottom;
dd.style.left=mybox.style.left;
dd.style.display='block';

Could you explain how style.bottom and style.left are placing the suggext box where it is? It would really help me grasp the concept.

Thanks

Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[vacunita]

Ohh, sorry, that was a mistake. Since I checked this on FF I didn't realize it did not work in IE. Basically I was placing the suggestion list under the textbox. Which FF does by default anyway.

If you need to have this work only in IE then adding a <br> tag between the textbox and the div should be enough.

However if you need it to work across multiple browsers like Safari, and Chrome to name a few, then its not going to be easy.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[LyndonOHRC]

If I put the <br> tag between it introduces an unwanted line on the form. Actually the suggest list where it is works well. I am concerned, however, that I don't know how to position it in IE where I want it.

The form will only be used by two people on an intranet, no public access. Who knows how long IE will be their mandatory browser? Maybe a long time, maybe not...

Do you have any pointers on getting the correct position in IE?

I plan use the javascript functions and style properties discussed here to control the suggest list needs in hundresd of other forms on this intranet so I guess now is the time to make it cross platform as well.




Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[vacunita]

If you are o.k. with having the list display to the side of the textbox in IE7 then that should work fine now across all browsers.

IE7 will display it to the side, every other browser, including IE8 strangely enough, will display it at the bottom of the textbox.

Checked now on Firefox, IE8, IE8 Compatibility (a.k.a IE7), Safari, and Chrome.

Works, and Validates too.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[LyndonOHRC]

I need to resurrect this thread. The example code provided in this thread works great. Now I’m trying to include it into a the form I’m designing. This code for this form is so large that I’ve included a link.

The DIV never pops up and I cannot figure out why. The onKeyUp event fires but the DIV’s contents do not appear on the form. I’m sure it’s being cause by something else I am doing but it sure has me stumped.

Any help or clue is greatly appreciated.



Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey

 

[vacunita]

You have too many errors, including two body sections and tons of repeated ID's to begin to debug why its not working.

You need to fix your errors, and your duplicated tags, non-unique ID's etc.. before any debugging can be made, otherwise there's no way to tell what's causing the issue, and you could try fix forever without finding the problem in that sea of errors.

http://validator.w3.org/check?uri=h...(detect+automatically)&doctype=Inline&group=0

Errors found while checking this document as HTML 4.01 Transitional!
Result: 132 Errors, 11 warning(s)

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[LyndonOHRC]

Thanks!!! I'll validate first next time. I'm not sure which validation error caused it but it doesn't matter.

Next step is to populate the div using ajax... I'll probably see you in that forum. LOL

Very much appreciated as always.


Lyndon

---People Remember about 10% of what you say ---They never forget how you made them feel. Covey