Hallo zusammen,

ich habe meine inputfelder mit CSS deklariert!

input,select{
border:solid 1px;
margin: 3px;
padding: 2px 2px 2px 5px;
background:url(../img/input.gif);
float:left;
display:block;
}

Jetzt habe ich eine Autocompl. funktion geschrieben und das div unter dem Inputfeld ist nur so groß wie das feld selber.

Wenn ich auf das autocomplete div-Feld width anwende tut sich nichts.

#autocomplete {
width:800px;
background-color:white;
border:1px solid #888;
margin:0;
padding:0;
}

Warum?

Vielen Dank vorab für eure Hilfe!
Luk

Hi,

kannst du bitte mal den dazugehörigen HTML-Code zeigen?

mfg Maik

Na klar doch!

<form id='auswahl' method='post' action=''>
<fieldset>
<legend>Auswahl:</legend>
<input name="autocomplete" id="autocomplete" type="text" value="" />
<input name='kunden_id' id='kunden_id' type='hidden' value='<?PHP echo $_POST['kunden_id']; ?>'/>
<input name='anzeigen' id='anzeigen' type='submit' value='anzeigen' class="submit"/>
</fieldset>
</form>
<div id="autocomplete"></div>

hilft das?

Was soll sich den tun?

Also bei mir wird die deklarierte Breite übernommen:



mfg Maik

ja, so meinte ich das nicht.

Das Inputfeld soll klein bleiben, sagen wir mal 100px
das div welches sich mit den auswahlmöglichkeiten unter dem Input öffnet soll breiter werden!

generrel sollte nicht zweimal die gleiche id vorhanden sein, mach ne classe daraus

Da stand aber eben noch was anderes:

Code :

1 2 3 4 5 6 7 8 9

<form id='auswahl' method='post' action=''> <fieldset> <legend>Auswahl:</legend> <input name="autocomplete" id="autocomplete" type="text" value="" /> <input name='kunden_id' id='kunden_id' type='hidden' value='<?PHP echo $_POST['kunden_id']; ?>'/> <input name='anzeigen' id='anzeigen' type='submit' value='anzeigen' class="submit"/> </fieldset> </form> <div id="[b]autocomplete_choices[/b]"></div>

Demnach mußt du den gleichnamigen ID-Bezeichner #autocomplete im <input> entfernen. Zumal dieser im Dokumentbaum eindeutig sein muß, also darin nicht mehrmals vergeben werden darf.

mfg Maik

Hier nochmal der aktuelle code!

HTML-Code:

<form id='auswahl' method='post' action='<?PHP echo $_SESSION['herkunft']; ?>'>
<fieldset>
<legend>Kundenauswahl:</legend>
<input name="autocomplete"	id="autocomplete"  	type="text" 	value="" />
<input name='kunden_id' 	id='kunden_id' 		type='hidden' 	value='<?PHP echo $_POST['kunden_id']; ?>'/>
<input name='anzeigen' 		id='anzeigen'		type='submit'  	value='anzeigen' class="submit"/>
</fieldset>
</form>
<div id="autocomplete_choices"></div>

CSS:

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

input,select{     border:solid 1px;     margin: 3px;     padding: 2px 2px 2px 5px;     background:url(../img/input.gif);     float:left;     display:block; } #autocomplete_choices {     width:50em;     background-image:url(../img/input.gif);     border:1px solid #888;     margin:0;     padding:0; } #autocomplete_choices ul li.selected {     background-image:url(../img/input_hover.gif); } #autocomplete_choices ul li {   list-style-type:none;   text-align:left;   display:block;   margin:0;   cursor:pointer; }

Geht so nicht!

Also die Breite für #autocomplete_choices wird bei mir von den Browsern weiterhin übernommen. Was dem inhaltsleeren Element aber derzeit fehlt, ist eine Höhe.

Lösung, eine Mindesthöhe deklarieren:

Code :

1 2 3 4 5 6 7 8

#autocomplete_choices {         width:50em;         background-image:url(../img/input.gif);         border:1px solid #888;         margin:0;         padding:0;         [B]min-height:1em;[/B] }

mfg Maik

also auf dem bild ist das div-feld genau so groß wie das input feld.

das div soll aber 800 breit sein, damit der text in eine zeile passt!

hast mal ein link weil lokal ist das nicht nachzuvollziehen

leider nein!

So, ich hab mal kurz recherchiert, und bin fündig geworden

• jQuery Autocomplete

In diesem Beispiel verhält es sich mit dem <div> genauso, wie bei dir, aber in der Dokumentation findet sich folgendes:

Zitat von http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txt

width (default value: 0)
Sets the width of the drop down layer. If a non-positive integer is specified, then the width of the box will be determined by the width of the input element. Generally speaking, you'll want to leave this value alone. However, in some circumstances you may have a small input element where the drop down layer needs to display a lot of options. In that case, you can specify a larger size.

jquery.autocomplete.js

Code javascript:

1 2	// Zeile 482 options.width = parseInt(options.width, 10) || 0; // "0" kann durch die gewünschte Breite ersetzt werden

mfg Maik

Hey Leute,

habe das ganze noch einmal umgemodelt: aus Datenschutz-technischen Gründen konnte ich vorhin nicht die wirkliche url anzeigen.

hier ein dummy!

http://otipp.de/todo.php

ich bekomme die dropdown liste nicht länger als das eingabefeld!

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

<html> <head> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> <style type="text/css"> <!-- input,select{     width:50px;     border:solid 1px;     background:#0FF;     float:left; }   div.autocomplete {     width:800px;     background:#fff;     border:1px solid #888;     position:absolute; }   div.autocomplete ul {   margin:0px;   padding:0px;   list-style-type:none; }   div.autocomplete ul li.selected {   background-color:#ffb; }   div.autocomplete ul li {     margin:0;     display:block;   }   --> </style> </head> <p>   <label for="bands_from_the_70s">Your favorite rock  band from the 70's:</label>   <br />   <input id="bands_from_the_70s" autocomplete="off" size="40" type="text" value="" /> </p>   <div class="autocomplete" id="band_list" style="display:none"></div> <script type="text/javascript"> var bandsList = [   'ABBA',   'AC/DC',   'Aerosmith',   'America',   'Bay City Rollers',   'Black Sabbath',   'Boston',   'David Bowie',   'Can',   'The Carpenters',   'Chicago',   'The Commodores',   'Crass',   'Deep Purple',   'The Doobie Brothers',   'Eagles',   'Fleetwood Mac',   'Haciendo Punto en Otro Son',   'Heart',   'Iggy Pop and the Stooges',   'Journey',   'Judas Priest',   'KC and the Sunshine Band', ];   new Autocompleter.Local('bands_from_the_70s', 'band_list', bandsList, { }); </script>   </body> </html>