✔ Suggest-DIV wird nur im Quirks-Mode wie gewünscht angezeigt

[Thomas D]

Bei mir gibt es nur eine Auswahlliste, die für jedes Textfeld verwendet wird:

<fieldset>
	<legend>Card</legend>
	<table border id="tippTbl"></table>
	<div id="auswahlliste"></div>
</fieldset>

Die Textfelder (dynamisch erweiterbar) befinden sich in der Tabelle 'tippTbl', die Suggests im DIV 'auswahlliste'. Dieses DIV ist absolut positioniert.

#auswahlliste
{
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	color: black;
}

Wenn ich dieses auf relative umstelle, dann passt die Anzeige natürlich erwartungsgemäß nicht: http://www.thomasd.info/temp/relative.jpg

Besteht deine Lösung nun darin, mehrere Auswahllisten zu verwenden - also für jedes Textfeld eines? Oder würdest du die Auswahlliste in der DOM-Struktur laufend verschieben? Beide Lösungen erscheinen mir nicht ideal - oder habe ich dich falsch verstanden? ... Da es im Quirks-Modus ja ohne große Adaptierungen funktioniert, würde mich interessieren, warum es mit dem Hinzufügen eines Doctypes plötzlich misslingt.

Sorry, wenn ich dich damit nerve, aber leider checke ich das ewig langem Herumprobieren (im Juli) noch immer nicht ...

 

[Maik]

Hast du meine letzte Antwort nicht richtig gelesen, oder die Aussage nicht verstanden?

Wenn du im standardkonformen Modus ein Element absolut positionierst, beziehen sich die Startpositionen immer auf den Dokumentkörper body.

Wenn aber das Element, in dem sich #auswahlliste befindet, relativ positioniert wird, beziehen sich die absoluten Angaben auf seine Boxengrenzen.

mfg Maik

 

[Thomas D]

Das habe ich schon verstanden; aber wie sieht jetzt die konkrete Lösung aus ? Wenn ich die Auswahlliste nämlich als Kind der Tabelle einfüge und auf relative umstelle, dann habe ich doch auch nicht das gewünschte Verhalten:

<fieldset>
	<legend>Card</legend>
	<table style="position: relative" border id="tippTbl">
		<div id="auswahlliste"></div>
	</table>
</fieldset>

Und damit es relative zu den Textfeldern positioniert wird, müsste die Auswahlliste ja entweder im DOM-Baum dynamisch verschoben oder mehrere Auswahllisten verwendet werden. Oder sehe ich das falsch? Somit erschließt sich mir leider noch immer keine passende Lösung ...

Ich werde wohl das ganze so lassen wie es ist - schaut zwar nicht gut aus, aber eine andere Lösung scheine ich nicht überreißen zu können.

 

[Thomas D]

In der Zwischenzeit habe ich eine Lösung für mein Problem gefunden, die ich hier für alle Interessierten noch einmal posten möchte :

CSS:

#auswahlliste
{
	position: absolute;
	left: 0px;
	top: 0px;
}

Input-Felder (gilt für alle):

<input type="text" ... onfocus="javascript: positionSuggest();" />

JavaScript:

/*
hier wird die Suggest-Box an die richtige Stelle (unter der Input-Box, in der gerade Eingaben erfolgen) positioniert
diese Methode wird dann aufgerufen, wenn ein Inputfeld den Fokus erhält
*/
function positionSuggest (e)
{
    var suggest = document.getElementById ("auswahlliste");
    
    var top = getAbsoluteTop (this) + 20; //einen Offset dazuzählen, damit die Anzeige unter dem Inputfeld und nicht direkt drinnen ist
    var left = getAbsoluteLeft (this);
    
    suggest.style.top = top +"px"; //eine Einheit muss zwangsweise mit angegeben werden, ansonsten werden diese Anweisungen ignoriert
    suggest.style.left = left +"px";
}

/*
Liefert die absolute Distanz zum Dokumentbeginn in der Höhe
*/
function getAbsoluteTop (element)
{
    return (element.offsetParent)?  element.offsetTop + getAbsoluteTop (element.offsetParent) : element.offsetTop;
}

/*
Liefert die absolute Distanz zum Dokumentbeginn in der Breite
*/
function getAbsoluteLeft (element)
{
    return (element.offsetParent)?  element.offsetLeft + getAbsoluteLeft (element.offsetParent) : element.offsetLeft;
}

Ich passe also bei jedem Neufokusieren des Eingabecursors auf ein betroffenes Textfield die Position der Auswahlliste an jene des Textfeldes an. Ich dachte, vielleicht könnte einem anderen mal dieser Code nützen ...