Problem
Ich habe einen, <select>bei dem einer der <option>Textwerte sehr lang ist. Ich möchte, dass die <select>Größe geändert wird, damit sie niemals breiter als das übergeordnete Element ist, auch wenn der angezeigte Text abgeschnitten werden muss. max-width: 100%sollte das tun.
Vor dem Ändern der Größe:
Was ich nach der Größenänderung möchte:
Wenn Sie dieses jsFiddle-Beispiel laden und die Breite des Ergebnisbedienfelds so ändern, dass sie kleiner als die des ist <select>, können Sie feststellen, dass die Auswahl innerhalb des Beispiels <fieldset>die Breite nicht verkleinert.
Was ich nach der Größenänderung tatsächlich sehe:
Die entsprechende Seite mit a <div>anstelle von a wird<fieldset> jedoch ordnungsgemäß skaliert. Sie können dies sehen und Ihre Änderungen einfacher testen, wenn Sie auf einer Seite ein <fieldset>und ein <div>nebeneinander haben . Wenn Sie die umgebenden <fieldset>Tags löschen , funktioniert die Größenänderung. Das <fieldset>Tag führt irgendwie dazu, dass die horizontale Größenänderung unterbrochen wird.
Das <fieldset>Verhalten ist so, als ob es eine CSS-Regel gibt fieldset { min-width: min-content; }. ( min-contentbedeutet ungefähr die kleinste Breite, die kein Kind zum Überlaufen bringt.) Wenn ich die <fieldset>durch eine <div>mitmin-width: min-content ersetze , sieht sie genauso aus. Es gibt jedoch keine Regel min-contentin meinen Stilen, im Standard-Stylesheet des Browsers oder im CSS-Inspektor von Firebug. Ich habe versucht, jeden Stil zu überschreiben, der <fieldset>im CSS-Inspektor von Firebug und im Standard-Stylesheet forms.css von Firefox angezeigt wird , aber das hat nicht geholfen. Speziell überschrieben min-widthund widthauch nichts getan.
Code
HTML des Feldsatzes:
<fieldset>
<div class="wrapper">
<select id="section" name="section">
<option value="-1"></option>
<option value="1501" selected="selected">Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.</option>
<option value="1480">Subcontractor</option>
<option value="3181">Valley</option>
<option value="3180">Ventura</option>
<option value="3220">Very Newest Section</option>
<option value="1481">Visitor</option>
<option value="3200">N/A</option>
</select>
</div>
</fieldset>
Mein CSS, das funktionieren sollte, aber nicht:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
Das Zurücksetzen der widthEigenschaften auf die Standardeinstellungen bewirkt nichts:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
Weiteres CSS, in dem ich versuche, das Problem nicht zu beheben :
/* try lots of things to fix the width, with no success: */
fieldset {
display: block;
min-width: 0;
max-width: 100%;
width: 100%;
text-overflow: clip;
}
div.wrapper {
width: 100%;
}
select {
overflow: hidden;
}
Mehr Details
Das Problem tritt auch in diesem umfassenderen, komplizierteren jsFiddle-Beispiel auf , das der Webseite, die ich tatsächlich zu beheben versuche, ähnlicher ist. Sie können daran erkennen, dass dies <select>nicht das Problem ist - ein Inline-Block kann divauch nicht in der Größe geändert werden. Obwohl dieses Beispiel komplizierter ist, gehe ich davon aus, dass die Korrektur für den obigen einfachen Fall auch diesen komplizierteren Fall behebt.
[Bearbeiten: siehe Details zur Browserunterstützung unten.]
Eine merkwürdige Sache bei diesem Problem ist, dass wenn Sie festlegendiv.wrapper { width: 50%; } , dass sich die <fieldset>Größe an dem Punkt ändert, an dem die volle Größe <select>den Rand des Ansichtsfensters erreicht hätte. Die Größenänderung erfolgt so, als ob das <select>hat width: 100%, obwohl das so <select>aussieht , als ob es hat width: 50%.
Wenn Sie das <select>selbst gebenwidth: 50% , tritt dieses Verhalten nicht auf; Die Breite ist einfach richtig eingestellt.
Ich verstehe den Grund für diesen Unterschied nicht. Aber es kann nicht relevant sein.
Ich fand auch die sehr ähnliche Frage HTML-Feldset ermöglicht es Kindern, unbegrenzt zu erweitern . Der Fragesteller konnte keine Lösung finden und vermutet, dass es keine andere Lösung gibt, als die zu entfernen <fieldset>. Aber ich frage mich, wenn es wirklich unmöglich ist, die <fieldset>Anzeige richtig zu machen , warum ist das so? Was in <fieldset>der Spezifikation oder im Standard-CSS ( ab dieser Frage ) verursacht dieses Verhalten? Dieses spezielle Verhalten wird wahrscheinlich irgendwo dokumentiert, da mehrere Browser so funktionieren.
Hintergrundziel und Anforderungen
Der Grund, warum ich dies versuche, ist das Schreiben mobiler Stile für eine vorhandene Seite mit einer großen Form. Das Formular besteht aus mehreren Abschnitten, und ein Teil davon ist in a eingeschlossen <fieldset>. Auf einem Smartphone (oder wenn Sie Ihr Browserfenster klein machen) ist der Teil der Seite mit dem <fieldset>viel breiter als der Rest des Formulars. Der größte Teil des Formulars beschränkt seine Breite in Ordnung, der Abschnitt mit dem <fieldset>jedoch nicht. Dies zwingt den Benutzer, herauszuzoomen oder nach rechts zu scrollen, um den gesamten Abschnitt anzuzeigen.
Ich bin vorsichtig <fieldset>, wenn ich das einfach entferne , da es auf vielen Seiten in einer großen App generiert wird, und ich bin mir nicht sicher, welche Selektoren in CSS oder JavaScript davon abhängen könnten.
Ich kann JavaScript verwenden, wenn ich muss, und eine JavaScript-Lösung ist besser als nichts. Aber wenn JavaScript der einzige Weg ist, dies zu tun, wäre ich gespannt auf eine Erklärung, warum dies nicht nur mit CSS und HTML möglich ist.
Bearbeiten: Browser-Unterstützung
Auf der Website muss ich Internet Explorer 8 und höher (wir haben gerade die Unterstützung für IE7 eingestellt), den neuesten Firefox und das neueste Chrome unterstützen. Diese spezielle Seite sollte auch auf iOS- und Android-Smartphones funktionieren. Für Internet Explorer 8 ist ein leicht verschlechtertes, aber immer noch verwendbares Verhalten akzeptabel.
Ich habe mein kaputtes fieldsetBeispiel in verschiedenen Browsern erneut getestet . In diesen Browsern funktioniert es tatsächlich bereits:
- Internet Explorer 8, 9 und 10
- Chrom
- Chrome für Android
Es bricht in diesen Browsern:
- Feuerfuchs
- Firefox für Android
- Internet Explorer 7
Daher ist Firefox (sowohl auf dem Desktop als auch auf dem Handy) der einzige Browser, der mir wichtig ist, dass der aktuelle Code einbricht. Wenn der Code so repariert würde, dass er in Firefox funktioniert, ohne ihn in anderen Browsern zu beschädigen, würde dies mein Problem lösen.
Die Site-HTML-Vorlage verwendet bedingte Internet Explorer-Kommentare, um Klassen wie .ie8und .oldiezum <html>Element hinzuzufügen . Sie können diese Klassen in Ihrem CSS verwenden, wenn Sie Stylingunterschiede im IE umgehen müssen. Die hinzugefügten Klassen sind dieselben wie in dieser alten Version von HTML5 Boilerplate .
<fieldset>(oder div.wrapper) die Breite an, die es benötigt, und select { width:100% }. max-widthscheint dem Element einige% der ursprünglichen Breite des übergeordneten Elements zu geben , skaliert dann nicht, wohingegen widthes mit dem übergeordneten Element skaliert. Ich denke, das wird tun, was Sie wollen (aber ich hätte es falsch verstehen können). Versuchen Sie in Ihrer komplexeren Geige, den Feldern in der linken Spalte eine% -Breite und eine Min-Pixel-Breite zuzuweisen. Geben Sie dann die Felder rechts 100 - (linke Felder -% - Breite)% Breite an.