[HTML/CSS] Textfeld über Selectbox legen. [Archiv]

M@tes

2011-11-29, 18:49:30

Hallo zusammen!
Hab grad ein ziemlich blödes Problemchen.
Und zwar möchte ich eine Art Combobox wie man sie im Officemakros kennt erstellen.
Man soll nach vor definierten Optionen suchen können oder selber Suchwerte in das Textfeld eingeben können.
Angehängt ein Beispiel als Screenshot. Wenn man rechts drauf drückt, soll wie gewohnt das Dropdownmenü runterfahren.
Funktioniert soweit auch super! Im IE9 :P IE8 tut dann das Dropdownmenü auf die gleiche Breite schieben, wie das Drobdownfeld selber.
Hier ein Beispielcode, wies schon funktioniert, wie es soll. Fehlt nurnoch, das der Text linksbündig ist. Habt ihr eine Idee??

<form name="search">
<table>
<tr>
<td style="background-color:#aaaaaa;" class="border">
<input type="text" name="test">
</td>
<td style="background-color:#aaaaaa;" class="border">
<div style="width:17px;overflow:hidden;">
<select style="direction:rtl;" onChange="search.test.value = this.value; search.test.focus();">
<option value="">Auswählen</option>
<option value="x">x</option>
<option value="y">y</option>
</select>
</div>
</td>
</tr>
</table>
</form>

Mr_Karlo

2011-11-29, 20:54:29

Probiers mal so

<html>
<head>
<style type="text/css">

#inp
{
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
width: 70px;
background-color: #AAAAAA;
}

#sel
{
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
width: 90px;
background-color: #AAAAAA;
}

</style>
</head>
<body>

<form name="search">
<input id="inp" type="text" name="test">
<select id="sel" onChange="search.test.value = this.value; search.test.focus();">
<option value="">Auswählen</option>
<option value="x">x</option>
<option value="y">y</option>
</select>
</form>

</body>
</html>

M@tes

2011-11-30, 09:47:21

Hallo!
Diesen Ansatz überlegte ich mir auch schon, bringt mich leider aber auch nicht weiter.
Die Seite ist Tabellenorientiert aufgebaut. Entsprechend müssten die beiden Felder auch jeweils mit den Tabellen mitwandern, wenn sich z.B. die Fenstergrösse ändert. Oder hab ich da was falsch verstanden?

Mr_Karlo

2011-11-30, 12:48:13

Die Seite ist Tabellenorientiert aufgebaut. Entsprechend müssten die beiden Felder auch jeweils mit den Tabellen mitwandern, wenn sich z.B. die Fenstergrösse ändert. Oder hab ich da was falsch verstanden?

Das eine schließt das andere nicht unbedingt aus. Du kannst auch die Formularfelder absolut im Bezug auf das Vorfahrenelement positionieren. Je nachdem wie diese wiederum positioniert ist.

Soll das komplette Formular in eine einzelne Tabellenzelle oder befinden sich die einzelnen Formularelemente jeweils in einer Zelle? Vielleicht kannst du grob skizzieren wie das aussehen soll.

Mr_Karlo

2011-11-30, 14:52:29

Ich glaube es geht auch einfacher und ohne absoluter Positionierung.

Wenn du das Eingabefeld nach der Auswahlliste notierst, befindet es sich aufgrund des normalen Elementflusses ohnehin über der Auswahlliste. Mit einem negativen margin-left Wert kannst du es dann soweit darüber schieben, dass nur noch der kleine Pfeil sichtbar ist.

Ob sich das ganze nun in einer Tabelle befindet oder nicht sollte imo egal sein.

<html>
<head>
<style type="text/css">

#sel
{
width: 90px;
background-color: #AAAAAA;
}

#inp
{
width: 70px;
background-color: #AAAAAA;
margin-left: -94px;
}

</style>
</head>

<body>
<form name="search">
<select id="sel" onChange="search.test.value = this.value; search.test.focus();">
<option value="">Auswählen</option>
<option value="x">x</option>
<option value="y">y</option>
</select>
<input id="inp" type="text" name="test">
</form>
</body>
</html>

M@tes

2011-11-30, 18:03:06

Ja ich glaub das funktioniert! Eigentlich so simpel.........................
Müsst ich morgen auf nem älteren Computer testen.
Danke!!