Mélange de overflow auto et white-space: nowrap peu harmonieux.

Bonjour,

je butte sur un problème ce matin:

J'ai une boîte en position: absolute (non négociable), dans laquelle j'ai plusieures boîtes qui contiennent un contenu texte. Je souhaite un défilement vertical après une hauteur maximale. De plus chaque élément doit rester sur une ligne, et la boîte s'adapter à la largeur du contenu.
Tout fonctionne bien, excepté qu'un scroll horizontal apparaît. (firefox/safari)

Avec firebug, il semble réduire la taille des boîtes mais le contenu en sort (comme lors d'un overflow). Connaissez-vous une astuce qui permette de régler ce problème, autre que "réserver un espace à droite avec un padding et empêcher l'overflow horizontal?

Le dabblet: http://dabblet.com/gist/3016916
Le css:

#test { 
	position: absolute;
	left: 50px;
	top: 50px;
	background-color: #cceeff;
	padding: 0.5em;
	max-height: 100px;
	overflow: auto;
	width: auto;
}
#test div {
	white-space: nowrap;
}

Le html:

<div id="test">
	<div>MA LIGNE</div>
	<div>une autre</div>
	<div>encore</div>
	<div>bla bla bla bla</div>
	<div>Une ligne qui se trouve être très longue</div>
	<div>une autre</div>
	<div>encore une dernière</div>
</div>

n.b:
– compatibilité: je choisis selon les tests ^^.
– Dans la vraie vie, ce sont des ul/li mais peut importe.
– Je ne peux pas bricoler en js pour des raisons de maintenance.

Bonjour,

C'est la scrollbar vertical qui force l'horizontal.

Modifie ton padding pour t'en convaincre:

padding :0.5em 1em 0.5em 0.5em;

Ou 1 em correspond approximativement a la largeur de la scrollbar (incluse et calculé dans la largeur de la boite ... )

++

Hello.

Pas mieux que gc-nomade, pas trop d'autres solutions qu'un paddding-right.
Par contre, en triturant un peu ton dabblet, je me suis rendu compte que si ta phrase "vraiment vraiment longue" est encore plus longue, ta boite va sortir du viewport à cause du nowrap.
Modifié par Florian_R (29 Jun 2012 - 12:06)

Florian_R a écrit :
Hello.
Par contre, en triturant un peu ton dabblet, je me suis rendu compte que si ta phrase "vraiment vraiment longue" est encore plus longue, ta boite va sortir du viewport à cause du nowrap.

oups,

Si le padding du conteneur ne te convient pas, il peut etre reporté en margin-right sur le contenu. L'idée est, bien sur, de dégagé la place qu'occupe la barre de défilement.

Je cherche justement une autre solution. La padding à droite me pose des problèmes lorsque la scrollbar n'est pas affichée… Et l'afficher tout le temps n'est pas non plus ce que je souhaite.
J'espérais naïvement que la div sans largeur fixe s'adapterait au contenu à l'intérieur, mais ce n'est plus le cas avec word-wrap, vu que l'ajout de la scrollbar réduit la taille des div internes au lieu de s'y adapter… C'est un peu pourri…

Florian_R a écrit :
Par contre, en triturant un peu ton dabblet, je me suis rendu compte que si ta phrase "vraiment vraiment longue" est encore plus longue, ta boite va sortir du viewport à cause du nowrap.

Pas faux, je rajouterai un truc du genre "max-width: 400px; overflow: hidden; text-overflow: ellipsis;"

Il y a aussi : overflow-x:hidden;, encore moins terrible.

Reste la solution de fondre ce dernier em avec le reste, en y appliquant une couleur ou image de fond.

linear-gradient peut te reproduire une bordure de 2 px avec 2 couleurs de chaque coté, background-color + background-image ou background-multiple.

Un trompe l'oeil en quelque sorte.

++