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 .

Update (25. September 2017)

Der unten beschriebene Firefox-Fehler wurde ab Firefox 53 behoben und der Link zu dieser Antwort wurde endgültig aus der Bootstrap-Dokumentation entfernt .

Ich entschuldige mich auch aufrichtig bei den Mozilla-Mitwirkenden, die das Entfernen der Unterstützung -moz-documentteilweise aufgrund dieser Antwort blockieren mussten .

Die Reparatur

In WebKit und Firefox 53+, die Sie gerade eingestellt min-width: 0;auf der Fieldset den Standardwert außer Kraft zu setzen min-content.¹

Trotzdem ist Firefox ein bisschen… seltsam, wenn es um Feldsätze geht. Damit dies in früheren Versionen funktioniert, müssen Sie die displayEigenschaft des Feldsatzes in einen der folgenden Werte ändern :

• table-cell (empfohlen)
• table-column
• table-column-group
• table-footer-group
• table-header-group
• table-row
• table-row-group

Davon empfehle ichtable-cell . Beides table-rowund table-row-groupverhindern, dass Sie die Breite ändern, während table-columnund table-column-groupverhindern , dass Sie die Höhe ändern.

Dies wird (etwas vernünftigerweise) das Rendern im IE unterbrechen. Da dies nur von Gecko benötigt wird, können Sie zu Recht eine der proprietären CSS-Erweiterungen@-moz-document von Mozilla verwenden , um sie vor anderen Browsern zu verbergen:

@-moz-document url-prefix() {
    fieldset {
        display: table-cell;
    }
}

(Hier ist eine jsFiddle-Demo .)

Das behebt Dinge, aber wenn Sie so etwas wie ich sind, war Ihre Reaktion so etwas wie ...

Was.

Es gibt einen Grund, aber es ist nicht schön.

Die Standarddarstellung des Feldsatzelements ist absurd und in CSS im Wesentlichen nicht anzugeben. Denken Sie darüber nach: Der Rand des Feldsatzes verschwindet dort, wo er von einem Legendenelement überlappt wird, aber der Hintergrund bleibt sichtbar! Es gibt keine Möglichkeit, dies mit einer anderen Kombination von Elementen zu reproduzieren.

Um das Ganze abzurunden, sind Implementierungen voller Zugeständnisse an das bisherige Verhalten. Eine davon ist, dass die minimale Breite eines Feldsatzes niemals kleiner ist als die intrinsische Breite seines Inhalts. Mit WebKit können Sie dieses Verhalten überschreiben, indem Sie es im Standard-Stylesheet angeben. Gecko² geht jedoch noch einen Schritt weiter und erzwingt es in der Rendering-Engine .

Interne Tabellenelemente bilden jedoch einen speziellen Rahmentyp in Gecko. Dimensionsbeschränkungen für Elemente mit diesen festgelegten displayWerten werden in einem separaten Codepfad berechnet , wobei die erzwungene Mindestbreite für Feldsätze vollständig umgangen wird.

Wiederum - der Fehler hierfür wurde ab Firefox 53 behoben, sodass Sie diesen Hack nicht benötigen, wenn Sie nur auf neuere Versionen abzielen.

Ist die Verwendung @-moz-documentsicher?

Für diese eine Ausgabe ja. @-moz-documentfunktioniert wie vorgesehen in allen Versionen von Firefox bis 53, wo dieser Fehler behoben ist.

Das ist kein Zufall. Aufgrund dieser Antwort teilweise die Fehler zu begrenzen , @-moz-documentum Benutzer / UA Sheets wurde abhängig von den zugrunde liegenden Fieldset Fehlern gemacht wird zunächst festgelegt.

Darüber hinaus, verwenden Sie nicht @-moz-documentzu Firefox in Ihrem CSS Ziel , andere Ressourcen notwithstanding.³

¹ Wert kann vorangestellt werden. Laut einem Leser hat dies keine Auswirkungen auf Android 4.1.2 Stock Browser und möglicherweise andere alte Versionen. Ich hatte keine Zeit, dies zu überprüfen.

² Alle Links zur Gecko-Quelle in dieser Antwort beziehen sich auf den Änderungssatz 5065fdc12408 , der am 29. Juli 2013 zugesagt wurde. Möglicherweise möchten Sie Notizen mit der neuesten Version von Mozilla Central vergleichen .

³ Siehe z. B. SO # 953491: Nur Firefox mit CSS und CSS-Tricks ausrichten: CSS-Hacks, die auf Firefox abzielen, finden Artikel mit häufigem Bezug auf hochkarätige Websites.

Safari unter iOS Problem mit ausgewählter Antwort

Ich fand die Antwort von Jordan Gray besonders hilfreich. Allerdings schien es dieses Problem unter Safari iOS für mich nicht zu lösen.

Das Problem für mich ist einfach, dass die Feldmenge keine automatische Breite haben kann, wenn das Element darin eine maximale Breite als% Breite hat.

Problem behoben

Das einfache Einstellen des Feldsatzes auf eine Breite von 100% des Containers scheint dieses Problem zu umgehen.

Beispiel

fieldset {
    min-width: 0; 
    width: 100%; 
}

Arbeitsbeispiele finden Sie unten. Wenn Sie die% width aus dem Feldset entfernen oder durch auto ersetzen, funktioniert sie nicht weiter.

JSFiddle | Codepen

Ich habe viele Stunden damit zu kämpfen, und im Grunde wendet der Browser das berechnete Styling an, das Sie in Ihrem CSS überschreiben müssen. Ich vergesse die genaue Eigenschaft, die für fieldsetElemente gegenüber divs festgelegt wird (vielleicht min-width?).

Mein bester Rat wäre, Ihr Element in a zu ändern div, die berechneten Stile von Ihrem Inspektor zu kopieren, dann Ihr Element wieder in zu ändern fieldsetund die berechneten Stile zu vergleichen, um den Schuldigen zu finden.

Hoffentlich hilft das.

Update: Hinzufügen von display: table-cellHilfen in Nicht-Chrome-Browsern.

.fake-select { white-space:nowrap; }veranlasste die Feldmenge, das .fake-selectElement anhand seiner ursprünglichen Breite und nicht anhand seiner erzwungenen Breite zu interpretieren (selbst wenn der Überlauf ausgeblendet ist).

Entfernen Sie die Regel, und ändern Sie .fake-select‚s max-width:100%einfach width:100%und alles passt. Die Einschränkung ist, dass Sie den gesamten Inhalt der Fake-Select sehen, aber ich denke nicht, dass dies alles so schlimm ist, und es passt jetzt horizontal.

Update: Mit den aktuellen Regeln in der folgenden Geige (die nur echte Auswahlen enthält) sind die untergeordneten Elemente des Feldsatzes auf die korrekte Breite beschränkt. Abgesehen vom Entfernen von Regeln für .fake-selectund Korrigieren von Kommentaren (von // commentbis /* comment */habe ich Änderungen im CSS der Geige festgestellt.

Ich verstehe Ihr Problem jetzt besser und die Geige spiegelt einige Fortschritte wider. Ich setze Standardregeln für alle <select>s, und Reserve .xxlargefür die , die Sie wissen , wird breiter als 480px (und das funktioniert nur , weil Sie wissen , die Breite #viewportund die Klasse zu denen zu breit manuell hinzufügen können. Nur erfordert ein wenig Test )

Beweis