Le fieldset HTML permet aux enfants de se développer indéfiniment

Je veux mettre une boîte déroulante à l'intérieur d'un fieldset, mais j'ai rencontré une anomalie et je n'arrive pas à me débrouiller. Lorsque vous placez votre div déroulant à l'intérieur d'un fieldset, le fieldset se développe au lieu de faire défiler l'élément défilant.Le fieldset HTML permet aux enfants de se développer indéfiniment

Voici a test case. Ce qui suit indéfiniment se dilate (boo):

<div style="width: 300px; overflow: hidden;"> 
    <fieldset> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

Mais if you use a div, cela fonctionne comme prévu (hourra!):

<div style="width: 300px; overflow: hidden;"> 
    <div> 
     <div style="overflow: scroll; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </div> 
</div>

Comment puis-je obtenir le fieldset à se comporter comme le div?

Source

2009-11-11 spudly

post-scriptum Je sais que je peux le réparer en mettant une largeur statique sur l'élément scrollable, mais je ne veux absolument pas le faire, alors ne le suggérez pas. – spudly

Devez-vous utiliser un fieldset? Si tout ce dont vous avez besoin est quelque chose qui ressemble à un fieldset, mabye utilise juste un div comme votre deuxième extrait de code (puisque ça marche) et ajoute une bordure pour le faire ressembler à un fieldset? – Upgradingdave

Il semble qu'il n'y ait pas de solution viable à ce problème. Si vous voulez vraiment un fieldset, vous pouvez utiliser un div puis le styler pour ressembler à un fieldset mais vous rencontrerez des tonnes de problèmes et de maux de tête. Meilleure solution: refactorisez le formulaire pour ne plus utiliser les fieldsets.

Source

2009-12-01 16:55:04 spudly

Malheureusement, le fieldset déborde de "attendu" dans IE mais pas dans Chrome ou Firefox. – row1

Je ne sais pas si vous voulez, mais que cela fonctionne:

<div style="width: 300px; overflow: auto;"> 
    <fieldset> 
     <div style="overflow: auto; white-space: nowrap;"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

Vous pouvez supprimer la racine div aussi, et ça va encore travailler.

Source

2009-11-11 16:09:15

'fraid pas. Je n'ai aucun contrôle sur la div extérieure. Ce que je dois faire, c'est que le fieldset occupe toute la largeur de la div externe, quelle que soit la largeur réelle de ce div externe. – spudly

J'ai modifié mon code, changé de débordement: caché; déborder: auto; Est-ce que cela aide? –

Est-ce: http://i29.tinypic.com/2hzi83q.png le genre de problème dont vous parlez? – Franz

Est-ce ce que vous cherchez?

<div style="overflow: auto; width: 300px; height: 55px;"> 
    <fieldset style="overflow: scroll; width: 100%; white-space: nowrap;"> 
     <div> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem arcu, sodales non gravida eget, vehicula vitae nulla. Quisque turpis justo, consectetur ut egestas at, pulvinar nec diam. Donec porttitor lobortis elit quis scelerisque. Proin at mollis nibh. Nulla nisi dolor, rutrum nec rhoncus congue, cursus at urna. Curabitur adipiscing euismod nisl nec consequat. Aliquam justo justo, bibendum id molestie eget, dignissim sit amet sapien. Phasellus non erat nulla, quis auctor eros. Proin pellentesque turpis eu ipsum venenatis egestas non eget lacus. Vestibulum ante diam, posuere ut fringilla nec, pretium ac metus. Integer laoreet fringilla ipsum, vel interdum urna pellentesque a. Donec lobortis tincidunt nisi, ac tristique massa pretium ac. Ut vel magna erat, et hendrerit sem. Curabitur vulputate, tellus quis pellentesque pretium, felis odio aliquam sapien, sit amet hendrerit arcu orci ut nulla. Vestibulum suscipit rhoncus arcu, ut aliquam eros sagittis a. Suspendisse eros elit, bibendum venenatis pulvinar at, scelerisque vel quam. 
     </div> 
    </fieldset> 
</div>

Source

2009-12-01 17:23:46 Danny

Pas tout à fait. La solution que vous fournissez ajoute une barre de défilement à la div externe et au fieldset. Je veux seulement que la div à l'intérieur du fieldset défile. Avez-vous testé votre solution? – spudly

WebKit et Firefox contraindre fieldsets d'avoir une largeur « implicite » en fonction de la largeur calculée de leur contenu. Voici comment le remplacer dans chacun d'eux.

WebKit le rend relativement facile. Ce comportement est défini dans la feuille de style par défaut, vous pouvez donc le remplacer en spécifiant min-width: 0 pour le jeu de champs.
Firefox est un écrou plus difficile car les contraintes de largeur de champs sont appliquées en profondeur dans le code de disposition Gecko. Heureusement, il existe une solution de contournement: ajoutez une règle Gecko uniquement pour définir la propriété display du fieldset sur une valeur correspondant à l'un des éléments de table internes.

Mettre le tout ensemble:

fieldset { min-width: 0; } 

@-moz-document url-prefix() { /* Only target Gecko. (Breaks layout in IE.) */ 
    fieldset { display: table-cell; } 
}

jsFiddle demo.

Ceci est basé sur my answer à un related question; vous pouvez vous référer à cela pour une explication plus complète, y compris les internes du navigateur gory liés au correctif pour Firefox.

Source

2013-07-29 11:13:19

extrêmement utile, merci – philfreo

Cela fonctionne! Je n'aime pas la réponse acceptée ... Et qui se soucie si elle casse la mise en page dans IE? –

-1

rappeler

position: absolute ne fonctionnera pas avec display: table cellule C'est ce que j'ai quand essayez de déboguer la mise en page flexible

si juste garder à l'esprit de celui-ci

Source

2015-07-23 07:09:45

Le fieldset HTML permet aux enfants de se développer indéfiniment

Répondre

Questions connexes