Problème
J'ai un <select>où l'une de ses <option>valeurs de texte est très longue. Je veux que le <select>redimensionne pour qu'il ne soit jamais plus large que son parent, même s'il doit couper son texte affiché. max-width: 100%devrait le faire.
Avant de redimensionner:
Ce que je veux après le redimensionnement:
Mais si vous chargez cet exemple jsFiddle et redimensionnez la largeur du panneau Résultat pour qu'elle soit plus petite que celle du <select>, vous pouvez voir que la sélection à l'intérieur du <fieldset>ne parvient pas à réduire sa largeur.
Ce que je vois réellement après le redimensionnement:
Cependant, la page équivalente avec un <div>au lieu d'un a<fieldset> évolue correctement. Vous pouvez le voir et tester vos modifications plus facilement si vous avez un <fieldset>et un <div>côte à côte sur une seule page . Et si vous supprimez les <fieldset>balises environnantes , le redimensionnement fonctionne. La <fieldset>balise provoque en quelque sorte la rupture du redimensionnement horizontal.
Les <fieldset>actes sont comme s'il y avait une règle CSS fieldset { min-width: min-content; }. ( min-contentsignifie, en gros, la plus petite largeur qui ne fait pas déborder un enfant.) Si je remplace le <fieldset>par un <div>avecmin-width: min-content , il a exactement la même apparence. Pourtant, il n'y a pas de règle avec min-contentdans mes styles, dans la feuille de style par défaut du navigateur, ou visible dans l'inspecteur CSS de Firebug. J'ai essayé de remplacer tous les styles visibles <fieldset>dans l'inspecteur CSS de Firebug et dans la feuille de style par défaut de Firefox, forms.css , mais cela n'a pas aidé. Spécifiquement prioritaire min-widthet widthn'a rien fait non plus.
Code
HTML de l'ensemble de champs:
<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>
Mon CSS devrait fonctionner mais ne l'est pas:
fieldset {
/* hide fieldset-specific visual features: */
margin: 0;
padding: 0;
border: none;
}
select {
max-width: 100%;
}
La réinitialisation des widthpropriétés aux valeurs par défaut ne fait rien:
fieldset {
width: auto;
min-width: 0;
max-width: none;
}
CSS supplémentaire dans lequel j'essaie et ne parviens pas à 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 produit également dans cet exemple jsFiddle plus complet et plus compliqué , qui est plus similaire à la page Web que j'essaie de corriger. Vous pouvez en voir que ce <select>n'est pas le problème - un bloc en ligne divne parvient pas non plus à 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 de prise en charge du navigateur ci-dessous.]
Une chose curieuse à propos de ce problème est que si vous définissezdiv.wrapper { width: 50%; } , les <fieldset>arrêts se redimensionnent au point alors la taille réelle <select>aurait atteint le bord de la fenêtre. Le redimensionnement se produit comme si le <select>has width: 100%, même si le <select>ressemblait width: 50%.
Si vous donnez le <select>lui - mêmewidth: 50% , ce comportement ne se produit pas; la largeur est simplement correctement réglée.
Je ne comprends pas la raison de cette différence. Mais cela peut ne pas être pertinent.
J'ai également trouvé que le champ de questions HTML très similaire permet aux enfants de se développer indéfiniment . Le demandeur n'a pas pu trouver de solution et suppose qu'il n'y a pas d' autre solution que de supprimer le <fieldset>. Mais je me demande, s'il est vraiment impossible de bien faire l' <fieldset>affichage, pourquoi est-ce? Quelle <fieldset>est la spécification ou le CSS par défaut (à partir de cette question ) à l'origine de ce comportement? Ce comportement spécial est probablement documenté quelque part, car plusieurs navigateurs fonctionnent comme ceci.
Objectif et exigences de base
La raison pour laquelle j'essaie de le faire est dans le cadre de l'écriture de styles mobiles pour une page existante avec un grand formulaire. Le formulaire comporte plusieurs sections, dont une partie est enveloppée dans un <fieldset>. Sur un smartphone (ou si vous réduisez la taille de la fenêtre de votre navigateur), la partie de la page avec le <fieldset>est beaucoup plus large que le reste du formulaire. La plupart du formulaire limite très bien sa largeur, mais pas la section avec le <fieldset>, forçant l'utilisateur à effectuer un zoom arrière ou à faire défiler vers la droite pour voir toute cette section.
Je me méfie simplement de supprimer le <fieldset>, 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 JavaScript pourraient en dépendre.
Je peux utiliser JavaScript si nécessaire, et une solution JavaScript vaut mieux que rien. Mais si JavaScript est le seul moyen de le faire, je serais curieux d'entendre pourquoi il n'est pas possible d'utiliser uniquement CSS et HTML.
Modifier: prise en charge du navigateur
Sur le site, je dois prendre en charge Internet Explorer 8 et versions ultérieures (nous venons de supprimer la prise en charge d'IE7), le dernier Firefox et le dernier 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 retesté mon fieldsetexemple cassé sur différents navigateurs. En fait, cela 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 auquel je tiens à ce que le code actuel entre en jeu est Firefox (à la fois sur ordinateur et sur mobile). Si le code était corrigé pour qu'il fonctionne dans Firefox sans le casser dans d'autres navigateurs, cela résoudrait mon problème.
Le modèle HTML du site utilise des commentaires conditionnels Internet Explorer pour ajouter des classes telles .ie8et .oldieà l' <html>élément. Vous pouvez utiliser ces classes dans votre CSS si vous avez besoin de contourner les différences de style dans IE. Les classes ajoutées sont les mêmes que dans cette ancienne version de HTML5 Boilerplate .
<fieldset>(ou div.wrapper) la largeur dont il a besoin, et select { width:100% }. max-widthsemble donner à l'élément quelque% de la largeur d' origine de son parent , puis ne se redimensionne pas, alors widthqu'il se redimensionne avec son parent. Je pense que cela fera ce que vous voulez (mais j'aurais pu mal compris). Dans votre violon plus complexe, essayez de donner aux champs de la colonne de gauche une largeur de% et une largeur de pixel minimale. Donnez ensuite aux champs de droite 100 - (champs de gauche -% - largeur)% largeur.