Barre de défilement (scroll) qui déborde

**baresi** · 09/07/2014, 11h55

Bonjour,

Dès que je dépasse les 210px la barre de défilement apparaît mais elle déborde de mon fieldset.

Nom : Capture.PNG
Affichages : 279
Taille : 8,6 Ko

Nom : Capture.PNG
Affichages : 279
Taille : 8,6 Ko

En haut à droite

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<fieldset class="fieldsetMenu" style="width: 400px; height:210px; overflow-y : auto;">
	<legend> Commentaires  </legend>
	<s:iterator value="lesCommentaires" var="params">bla bla</s:iterator>
	bla bla
</fieldset>

Voici le css mon fieldset :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.fieldsetMenu {
	border: 2px solid #DDDDDD;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	padding: 6px;
	text-align: left;
	margin-bottom: 20px;
}

Quelqu'un aurait une idée de pourquoi ça déborde et comme y remédier ?

Merci par avance

**NoSmoking** · 09/07/2014, 22h09

Bonjour,
visiblement sous Chrome (webkit) la scrollBar est gérée bizarrement.

Une autre solution est à mettre en oeuvre en se passant du FIELDSET attendu que le scroll a un rendu catastrophique.

**darkstar123456** · 12/07/2014, 17h57

Bonjour,

Cela ne me semble pas bizarre personnellement.

Le fieldset est un bloc géré par 2 balises : fieldset & legend.

En ajoutant une légende, vous agrandissez la taille du bloc (et ce peu importe la valeur de la proprité box-sizing)

Si vous souhaitez que la scrollbar apparaisse uniquement à l'intérieur du field, il faut créer un bloc qui soit à l'intérieur, comme ceci :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<fieldset class="fieldsetMenu" style="width: 400px;">
	<legend> Commentaires  </legend>
	<div style="height:150px;  overflow-y: auto;">
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
		<p>blabla</p>
	</div>
</fieldset>

Démo ici : http://tests.pierre-roels.com/fieldset.php

NB : évitez les styles inline ;-)

**NoSmoking** · 12/07/2014, 20h35

Cela ne me semble pas bizarre personnellement.

et pourtant si, attendu que pour avoir un comportement identique sur les différents navigateurs tu ajoutes un contenu conteneur.

Dans la solution que je propose je remplace le FIELDSET par un conteneur conventionnel, DIV par exemple, le rôle du FIELDSET me paraissant détourné et plus sémantiquement adéquat même si tout à fait valide et la LEGENDE par un Hx suivant le cas.

Dans l'image que nous montre baresi je ne vois nulle part de rapport avec un formulaire mais plutôt une succession d'informations donc son FIELSET n'est la que pour de la mise en forme.

J'aurais donc tendance à faire quelque chose dans le style de

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Faux Fieldset</title>
<style>
.fieldset {
    border:2px solid #DDDDDD;
    border-radius:8px;
    padding:6px;
    text-align:left;
    margin-bottom:20px;
}
.fieldset h1 {
    font-size:1.0em;
    position:absolute;
    margin-top:-1em;
    padding:0 0.25em;
    background: #FFF;
}
.fieldset ul{
    height:150px;
    overflow-y:auto;
    list-style:none;
    margin:0;
}
</style>
</head>
<body>
<div class="fieldset" style="width:400px;">
    <h1>Commentaires</h1>
    <ul>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
        <li>blabla</li>
    </ul>
</div>
</body>
</html>

on pourrait même intégrer les "nouvelles balises" HTML5 mais bon...

Barre de défilement (scroll) qui déborde

Défilement en CSS

Vue hybride

Discussions similaires

Partager

Partager