redimensionne mal; semble avoir inamovible `min-width: min-content`

Problème

J’ai un où l’une des valeurs de son est très longue. Je veux que le redimensionné pour qu’il ne soit jamais plus large que son parent, même s’il doit couper le texte affiché. max-width: 100% devrait le faire.

Avant redimensionner:

<img src="http://soffr.miximages.com/html/RIv8L.png" alt="la page avant le redimensionnement, montrant la totalité du select “>

Ce que je veux après redimensionnement:

<img src="http://soffr.miximages.com/html/DJnrc.png" alt="ma page désirée après redimensionnement, avec le select découpant son contenu”>

Mais si vous chargez cet exemple jsFiddle et redimensionnez la largeur du panneau de résultats pour qu’elle soit inférieure à celle de , vous pouvez voir que la sélection dans le

ne parvient pas à réduire sa largeur.

Ce que je vois réellement après redimensionner:

ma page actuelle après redimensionnement, avec une barre de défilement

Cependant, la page équivalente avec un

au lieu d’un

est correctement mise à l’échelle. Vous pouvez voir cela et tester vos modifications plus facilement si vous avez un

et un

côte à côte sur une page . Et si vous supprimez les balises

environnantes , le redimensionnement fonctionne. La

provoque en quelque sorte le redimensionnement horizontal.

Le

acts est comme s’il y avait une règle CSS fieldset { min-width: min-content; } fieldset { min-width: min-content; } . ( min-content signifie, en gros, la plus petite largeur qui ne fait pas déborder un enfant.) Si je remplace le

par un

avec min-width: min-content , cela ressemble exactement. Pourtant, il n’y a pas de règle avec un min-content dans mes styles, dans la feuille de style par défaut du navigateur ou dans l’inspecteur CSS de Firebug. J’ai essayé de remplacer tous les styles visibles sur le

dans l’inspecteur CSS de Firebug et dans la feuille de style default.cff de Firefox , mais cela n’a pas aidé. Ne pas modifier la min-width et la width ne font rien non plus.

Code

HTML du champset:

 
Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog. Subcontractor Valley Ventura Very Newest Section Visitor N/A

Mon CSS qui devrait fonctionner mais n’est pas:

 fieldset { /* hide fieldset-specific visual features: */ margin: 0; padding: 0; border: none; } select { max-width: 100%; } 

La réinitialisation des propriétés de width aux valeurs par défaut ne fait rien:

 fieldset { width: auto; min-width: 0; max-width: none; } 

Autres CSS dans lesquels j’essaie de résoudre le problème :

 /* 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; } 

Plus de détails

Le problème se pose également dans cet exemple jsFiddle , plus complet et plus complexe , qui ressemble davantage à la page Web que je tente de corriger. Vous pouvez voir à partir de cela que le n’est pas le problème – un div inline-block ne parvient pas à redimensionner. Bien que cet exemple soit plus compliqué, je suppose que le correctif pour le cas simple ci-dessus corrigera également ce cas plus compliqué.

[Modifier: voir les détails du support du navigateur ci-dessous.]

Une chose curieuse à propos de ce problème est que si vous définissez div.wrapper { width: 50%; } div.wrapper { width: 50%; } , le

cesse de se redimensionner au point où le pleine grandeur aurait atteint le bord de la fenêtre. Le redimensionnement se produit comme si le avait une width: 100% , même si le semble avoir une width: 50% .

après redimensionnement avec 50% de largeur

Si vous donnez le lui-même width: 50% , ce comportement ne se produit pas; la largeur est simplement réglée correctement.

après redimensionnement avec sélection de 50% de largeur

Je ne comprends pas la raison de cette différence. Mais cela peut ne pas être pertinent.

J’ai également trouvé la question très similaire HTML fieldset permet aux enfants de se développer indéfiniment . Le demandeur n’a pas pu trouver de solution et devine qu’il n’y a pas d’ autre solution que de supprimer le

. Mais je me demande, s’il est vraiment impossible de faire

, pourquoi? Qu’est-ce que dans la spécification ou le CSS par défaut de

(à partir de cette question ) provoque ce comportement? Ce comportement spécial est probablement documenté quelque part, car plusieurs navigateurs fonctionnent comme ceci.

But et exigences de base

La raison pour laquelle j’essaie de faire cela est dans le cadre de l’écriture de styles mobiles pour une page existante avec une grande forme. Le formulaire comporte plusieurs sections, dont une partie est

dans un

. Sur un smartphone (ou si la fenêtre de votre navigateur est petite), la partie de la page contenant le

est beaucoup plus large que le rest du formulaire. La plus grande partie de la forme limite sa largeur, mais la section avec

ne le permet pas, ce qui oblige l’utilisateur à effectuer un zoom arrière ou à faire défiler vers la droite pour voir toute cette section.

Je me garde de supprimer simplement le

, car il est généré sur de nombreuses pages dans une grande application, et je ne suis pas sûr de savoir quels sélecteurs en CSS ou en JavaScript peuvent en dépendre.

Je peux utiliser JavaScript si besoin est et une solution JavaScript vaut mieux que rien. Mais si JavaScript est la seule façon de faire cela, je serais curieux d’entendre une explication de la raison pour laquelle cela n’est pas possible en utilisant uniquement CSS et HTML.


Edit: support du navigateur

Sur le site, je dois prendre en charge Internet Explorer 8 et les versions ultérieures (nous venons de supprimer le support pour IE7), la dernière version de Firefox et la dernière version de Chrome. Cette page particulière devrait également fonctionner sur les smartphones iOS et Android. Un comportement légèrement dégradé mais toujours utilisable est acceptable pour Internet Explorer 8.

J’ai fieldset mon exemple de fieldset brisés sur différents navigateurs. Il fonctionne déjà dans ces navigateurs:

  • Internet Explorer 8, 9 et 10
  • Chrome
  • Chrome pour Android

Il casse dans ces navigateurs:

  • Firefox
  • Firefox pour Android
  • Internet Explorer 7

Ainsi, le seul navigateur dont je me préoccupe, à savoir le code actuel, est Firefox (à la fois sur ordinateur de bureau et mobile). Si le code était corrigé, cela fonctionnait dans Firefox sans le casser dans aucun autre navigateur, cela résoudrait mon problème.

Le modèle HTML de site utilise les commentaires conditionnels d’Internet Explorer pour append des classes telles que .ie8 et .oldie à l’élément . Vous pouvez utiliser ces classes dans votre CSS si vous devez contourner les différences de style dans Internet Explorer. Les classes ajoutées sont les mêmes que dans cette ancienne version de HTML5 Boilerplate .

Mise à jour (25 sept. 2017)

À mon grand soulagement, le bogue de Firefox décrit ci-dessous est corrigé à partir de Firefox 53 et le lien vers cette réponse a finalement été supprimé de la documentation de Bootstrap .

Le correctif

Dans WebKit et Firefox 53+, vous venez de définir min-width: 0; sur le jeu de champs pour remplacer la valeur par défaut du min-content minimal .¹

Pourtant, Firefox est un peu… bizarre en ce qui concerne les jeux de champs. Pour que cela fonctionne dans les versions antérieures, vous devez remplacer la propriété d’ display du Champset par l’une des valeurs suivantes:

  • table-cell (recommandé)
  • table-column
  • table-column-group
  • table-footer-group
  • table-header-group
  • table-row
  • table-row-group

Parmi ceux-ci, je recommande la table-cell . Les deux table-row et table-row-group vous empêchent de changer de largeur, tandis que table-column et table-column-group vous empêchent de changer de hauteur.

Cela va (un peu raisonnablement) casser le rendu dans IE. Comme seul Gecko a besoin de cela, vous pouvez utiliser à juste titre @-moz-document – une des extensions CSS propriétaires de Mozilla – pour le cacher des autres navigateurs:

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

(Voici une démo de jsFiddle .)


Cela corrige les choses, mais si vous êtes comme moi, votre réaction était quelque chose comme…

Quelle.

Il y a une raison, mais ce n’est pas joli.

La présentation par défaut de l’élément fieldset est absurde et impossible à spécifier dans CSS. Pensez-y: la bordure du champ de jeu disparaît là où elle est recouverte par un élément de légende, mais l’arrière-plan rest visible! Il n’y a aucun moyen de reproduire cela avec une autre combinaison d’éléments.

Pour couronner le tout, les implémentations sont pleines de concessions au comportement hérité. L’une d’elles est que la largeur minimale d’un champs n’est jamais inférieure à la largeur insortingnsèque de son contenu. WebKit vous permet de modifier ce comportement en le spécifiant dans la feuille de style par défaut, mais Gecko² va plus loin et l’ applique dans le moteur de rendu .

Cependant, les éléments de table internes constituent un type de trame spécial dans Gecko. Les contraintes dimensionnelles pour les éléments avec ces valeurs d’ display définies sont calculées dans un chemin de code distinct , en contournant entièrement la largeur minimale imposée imposée aux jeux de champs.

Encore une fois, le bogue pour cela a été corrigé depuis Firefox 53, vous n’avez donc pas besoin de ce hack si vous ne ciblez que des versions plus récentes.

L’utilisation de @-moz-document sûre?

Pour ce seul problème, oui. @-moz-document fonctionne comme prévu dans toutes les versions de Firefox jusqu’à 53, où ce bogue est corrigé.

Ce n’est pas un accident. En partie grâce à cette réponse, le bogue pour limiter @-moz-document aux feuilles de style utilisateur / UA était devenu dépendant du bogue du jeu de champs sous-jacent qui était corrigé en premier.

Au-delà de cela, je ne recommande plus d’utiliser @-moz-document pour cibler exclusivement Firefox dans votre CSS, nonobstant les autres ressources.


¹ La valeur peut être préfixée. Selon un lecteur, cela n’a aucun effet dans Android 4.1.2 Stock Browser et éventuellement d’autres anciennes versions; Je n’ai pas eu le temps de le vérifier.

² Tous les liens vers la source Gecko dans cette réponse se rapportent à l’ ensemble de modifications 5065fdc12408 , engagé le 29 juillet 2013; vous pouvez comparer les notes avec la révision la plus récente de Mozilla Central .

³ Voir par exemple SO n ° 953491: Ciblage uniquement de Firefox avec des astuces CSS et CSS: des hacks CSS ciblant Firefox pour des articles largement référencés sur des sites de premier plan.

Problème Safari sur iOS avec la réponse sélectionnée

J’ai trouvé la réponse de Jordan Gray particulièrement utile. Cependant, il ne semblait pas avoir résolu ce problème sur iOS Safari pour moi.

Le problème pour moi est simplement que le jeu de champs ne peut pas avoir une largeur automatique si l’élément a une largeur maximale en%.

Correction du problème

Le simple fait de définir le champ avec une largeur de 100% semble contourner ce problème.

Exemple

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

Veuillez vous reporter à l’exemple ci-dessous pour des exemples de travail – si vous supprimez la largeur du champ ou remplacez-la par auto, cela ne continuera pas à fonctionner.

JSFiddle | Codepen

Cela fait plusieurs heures que je me suis débattu, et fondamentalement, le navigateur applique un style calculé que vous devez remplacer dans votre CSS. J’oublie la propriété exacte qui est définie sur les éléments de jeu de fieldset par rapport à div s (peut min-width être min-width ?).

Mon meilleur conseil serait de changer votre élément en div , de copier les styles calculés à partir de votre inspecteur, puis de remplacer votre élément par fieldset et de comparer les styles calculés pour trouver le coupable.

J’espère que cela pourra aider.

Mise à jour: Ajout de l’ display: table-cell aide dans les navigateurs autres que Chrome.

.fake-select { white-space:nowrap; } .fake-select { white-space:nowrap; } fait que le jeu de champs interprète l’élément .fake-select par sa largeur d’origine, plutôt que par sa largeur forcée (même lorsque le dépassement est masqué).

Supprimez cette règle et modifiez la .fake-select max-width:100% en width:100% et tout est adapté. La mise en garde est que vous voyez tout le contenu de la fake-select, mais je ne pense pas que ce soit si mal, et il s’inscrit horizontalement maintenant.

Mise à jour: avec les règles actuelles du violon suivant (qui ne contient que des sélections réelles), les enfants du jeu de champs sont contraints de corriger les largeurs. Outre la suppression des règles pour .fake-select et la correction des commentaires (de // comment à /* comment */ , j’ai noté des changements dans le CSS du violon).

Je comprends mieux votre problème maintenant, et le violon reflète des progrès. Je mets en place des règles par défaut pour tous les s et réserve .xxlarge à ceux que vous connaissez plus larges que 480px (et cela ne fonctionne que parce que vous connaissez la largeur de #viewport et pouvez append manuellement la classe à celles trop larges). Nécessite juste un peu de test)

Preuve