CSS wahrscheinlich Vererbungsproblem

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!
 

Anhänge

  • test.jpg
    test.jpg
    31,8 KB · Aufrufe: 23
So, ich hab mal kurz recherchiert, und bin fündig geworden :)


In diesem Beispiel verhält es sich mit dem <div> genauso, wie bei dir, aber in der Dokumentation findet sich folgendes:
http://www.pengoworks.com/workshop/jquery/autocomplete_docs.txt hat gesagt.:
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.
Zum Vergrößern anklicken....
jquery.autocomplete.js
Javascript: 
// 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: 
<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>
 
Nachtrag zu meinem gefundenen Beispiel:

  • Vorher:
    jquery.autocomplete_vorher.jpg


  • Nachher, wenn der Wert für width z.B. auf "400" gesetzt wird:
    jquery.autocomplete_nachher.jpg

mfg Maik
 
Die !important-Regel aber bitte mit einem kleinen "i", ansonsten läuft der schöne Workaround ins Leere ;)

CSS: 
div.autocomplete {
	width:800px !important;
  	background:#fff;
  	border:1px solid #888;
  	position:absolute;
}

Das ich da nicht von selbst früher d'rauf gekommen bin - stattdessen wühle ich mich eine geschlagene Stunde durch das "prototype"- und "scriptaculous"-Framework, um nach einem geeigneten Lösungsansatz Ausschau zu halten :-(

Naja, Ende gut, alles gut :-)

Dank dir, break, für deine Recherche - vier Augen sehen halt doch mehr, wie zwei :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück