[BootStrap] Flex overflow responsive

**Sparky95** · 12/11/2020, 15h05

Bonjour,
J'ai un petit soucis de responsivité avec les element flex de bootstrap 4

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</head>
<body class="vh-100">
    <div class="h-100 d-flex flex-column">
            <div id="pos-content" class="tab-pane active h-100">
                <div class="d-flex flex-column h-100">
                    <div class="d-flex justify-content-between">
 
 
                    </div>
                    <div class="d-flex flex-row flex-fill no-gutters">
                        <div class="d-flex flex-column flex-grow-1">
                        </div>
                        <div class="col-3 d-flex flex-column justify-content-between">
                            <ul class="d-flex list-group text-capitalize">
                                <li class="list-group-item d-flex justify-content-between py-2">label
                                    :<span>val</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between py-2">label
                                    :<span>val</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between py-2">label
                                    :<span>val</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between py-2">label
                                    :<span>val</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between py-2">label
                                    :<span>val</span>
                                </li>
                            </ul>
                            <div class="d-flex flex-column no-gutters h-25">
                                <div class="col overflow-auto h-50">
                                    <ul class="d-flex list-group text-capitalize">
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>1</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>2</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>3</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>4</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>5</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>6</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>7</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>8</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>9</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>10</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>11</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>12</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>13</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>14</span>
                                        </li>
                                    </ul>
                                </div>
                                <div class="d-flex flex-column h-50">
                                    <ul class="d-flex list-group text-capitalize">
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>val</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>val</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>val</span>
                                        </li>
                                        <li class="list-group-item d-flex justify-content-between py-2">label:<span>val</span>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="d-flex flex-row justify-content-around align-items-center h-25">
                                <div>
                                    <button name="button" type="submit" id="btn_pause_receipt" class="btn text-warning" data-url="/pause_receipt">
                                        <i class="fas fa-pause fa-5x"></i>
                                    </button>
                                </div>
                                <div>
                                    <button name="button" type="submit" class="btn text-success">
                                        <i class="far fa-square fa-5x"></i>
                                    </button>
                                </div>
                                <div>
                                    <button name="button" type="submit" id="btn_stop" class="btn text-danger">
                                        <i class="far fa-square fa-5x"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="prod-content" class="tab-panel fade"></div>
        </div>
    </div>
    <div id="modal_add_receipt_item_quantity" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="title" aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="title">Quantité</h5>
                </div>
                <div class="modal-body">
                    <input type="number" name="input_receipt_quantity_modal" id="input_receipt_quantity_modal" value="1" class="form-control" min="1" max="9999" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="save btn btn-primary">Sauvegarder</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">annuler</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

le code à été inséré de sorte que vous puissiez directement tout mettre dans un fichier html et le lire

Status initial: J'ai 3 div qui ce situe en haut, milieu et bas de la page.
Résultat souhaité: le div du milieu se stretch en fonction de son contenu(enfant) une fois qu'il n'y a plus de margin/padding avec les div du haut et bas qu'un overflow s'actives

J'ai essayé de jouer avec les flex-{grow|shrink} mais sans succès

Solution temporaire trouvé: donner une taille fixe au div du milieu

Quels sont vos idées comment pourrais-je résoudre cela?

Je souhaiterais le faire directement à l'aide de Bootstrap maintenant si il n'y à pas de solution j'attaquerai ça via du css.

Merci d'avance pour votre aide

**NoSmoking** · 12/11/2020, 18h06

Bonjour,
si tu as choisi BootStrap pour te simplifier la vies j'ai l'impression que c'est raté

Ceci étant si l'on reprend la structure de ton document, au moins la partie qui nous intéresse :

Code html :

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

1
2
3
4
5
6
7
8
<div class="col-3 d-flex flex-column justify-content-between">
  <ul class="d-flex list-group text-capitalize">
  </ul>
  <div class="d-flex flex-column no-gutters h-25">
  </div>
  <div class="d-flex flex-row justify-content-around align-items-center h-25">
  </div>
</div>

les CSS, pour le « flex » se résumerait à

Code :

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

1
2
3
4
5
6
7
8
9
10
.element-haut {
  flex: 0 0 auto;
}
.element-milieu {
  flex: 1 1 auto;
  overflow: auto;
}
.element-bas {
  flex: 0 0 auto;
}

pour le reste je te laisse juge !

**Sparky95** · 13/11/2020, 10h42

Bonjour,
J'obtiens bien le résultat voulu à savoir l'overflow qui s'active cependant pour une raison que je n'ai pas encore trouvé, malgré l'overflow le scrolling de la page s'active également.

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
 
<div class="col-3 d-flex flex-column justify-content-between">
    <!-- elem 1 -->
    <ul class="d-flex list-group text-capitalize element-haut">
        ...
    </ul>
    <!-- elem 2 -->
    <div class="d-flex flex-column no-gutters element-milieu">
        <ul class="d-flex list-group text-capitalize overflow-auto">
            ...
        </ul>
        <ul class="d-flex list-group text-capitalize">
            ...
        </ul>
    </div>
    <!-- elem 3 -->
    <div class="d-flex flex-row justify-content-around align-items-center element-bas h-25">
        ...
    </div>
</div>

**NoSmoking** · 16/11/2020, 18h44

malgré l'overflow le scrolling de la page s'active également.

difficile, sans vrai exemple, de conclure quoique ce soit d'autant qu'à un moment le rétrécissement ne voudra surement plus rien dire.

Je dirais, un peu au feeling, qu'il te manque un max-height: 100%, sur un des conteneurs.
Tente sur le ligne #21 de ton premier code un

Code html :

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

<div class="d-flex flex-row flex-fill no-gutters" style="max-height:100%;">

Nota : perso je trouve la structure complexe.

**Sparky95** · 17/11/2020, 11h40

Comment me conseillerais tu de le faire?
sachant que ce que je cherches à faire est:

3 éléments avec un effet justify-content-between ( position vertical )
element 1: liste groupe ( 3-5 list-group-item )

element 2: taille flexible avec une taille max qui est = au parent - (element 1 + element 2)
- element 2.1: liste groupe ( 1 list-group-item )
- element 2.2: liste groupe => scrollable ( 0-14 list-group-item )
- element 2.3: liste groupe ( 2-5 list-group-item )

element 3: 3 boutons avec un effet justify-content-between

Le tout dois s'intégrer dans un div parent

Le tout responsive et l'élément 2 doit donc s'agrandir/rapetisser en fonction de la taille du scroll

**johanpetrikovsky** · 17/11/2020, 13h35

Salut,
Je m'incruste un peu dans la discussion j'aimerais bien savoir pourquoi utiliser bootstrap en 2020, je n'ai jamais été un grand utilisateur et autant je pouvais comprendre à l'époque où c'était plus délicat de faire un système de grille. Mais aujourd'hui avec flex et grid je vois moins l'intérêt.

A moins de vouloir faire un petit site rapidement qui ressemble à quelque chose sans se prendre la tête.
J'aimerais bien avoir vos retours en tout cas en espérant que ça ne pollue pas le topic.

**Sparky95** · 17/11/2020, 15h05

Bonjour,

Ici car je travail en entreprise et qu'ils veulent qu'on passe par Bootstrap en majorité.
De plus c'est assez modulable et responsif (+/-). N'étant pas un infographiste, cela me fait un gain de temps CSS et cela fait une uniformité sur les classes (pas besoin d'aller voir comment sont écrites les classes CSS de mes collègues).
Bref gain de temps car les puzzles sont déjà pré-écrits.

Comment travail tu?
tu parts d'un CSS blanc?

**NoSmoking** · 19/11/2020, 15h57

Comment me conseillerais tu de le faire?

Je ne sais pas ne sachant à quoi ressemble ce que tu souhaites en final, il faut une vision globale pour se prononcer.

C'est juste que je voyais une structure épurée du style

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
<div>
  <!-- 3 éléments avec un effet justify-content-between ( position vertical ) -->
  <ul>
    <!-- element 1: liste groupe ( 3-5 list-group-item ) -->
  </ul>
  <div>
    <!-- element 2: taille flexible avec une taille max qui est = au parent - (element 1 + element 2) -->
    <ul>
      <!-- - element 2.1: liste groupe ( 1 list-group-item )-->
    </ul>
    <ul>
      <!-- - element 2.2: liste groupe => scrollable ( 0-14 list-group-item )
    </ul>
    <ul>
      <!-- - element 2.3: liste groupe ( 2-5 list-group-item ) -->
    </ul>
  </div>
  <div>
    <!-- element 3: 3 boutons avec un effet justify-content-between -->
    <button>
    <button>
    <button>
  </div>
</div>

et à partir de là tu appliques tes styles nécessaires et suffisant.

**Sparky95** · 20/11/2020, 11h52

Envoyé par NoSmoking

Je ne sais pas ne sachant à quoi ressemble ce que tu souhaites en final, il faut une vision globale pour se prononcer.

https://prnt.sc/vmr3a7

Envoyé par NoSmoking

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
<div>
<!-- 3 éléments avec un effet justify-content-between ( position vertical ) -->
<ul>
<!-- element 1: liste groupe ( 3-5 list-group-item ) -->
</ul>
<div>
<!-- element 2: taille flexible avec une taille max qui est = au parent - (element 1 + element 2) -->
<ul>
<!-- - element 2.1: liste groupe ( 1 list-group-item )-->
</ul>
<ul>
<!-- - element 2.2: liste groupe => scrollable ( 0-14 list-group-item )
</ul>
<ul>
<!-- - element 2.3: liste groupe ( 2-5 list-group-item ) -->
</ul>
</div>
<div>
<!-- element 3: 3 boutons avec un effet justify-content-between -->
<button>
<button>
<button>
</div>
</div>

et à partir de là tu appliques tes styles nécessaires et suffisant.

n'est ce pas ce que j'ai fais? j'ai fais cette structure la puis j'y ai rajouté les styles bootstraps. sauf erreur de ma part.

**NoSmoking** · 22/11/2020, 09h36

n'est ce pas ce que j'ai fais? j'ai fais cette structure la puis j'y ai rajouté les styles bootstraps. sauf erreur de ma part.

je n'a pas regardé en détails

et au vu de ta capture je partirais sur
Nom : capture-ecran-1240x620.png
Affichages : 396
Taille : 14,2 Ko

pas besoin visiblement d'autant d'éléments en display:flex, trop de style tue le style !

Ensuite il convient de prendre en compte le périphérique de sortie et de voir si l'ergonomie convient aux utilisateurs.

**Sparky95** · 08/12/2020, 16h58

désolé j'ai été occupé ces derniers temps et cela m'est sorti de la tête.
Le fait de le faire comme tu m'as dis ne me permets pas de mettre l'élément right_bottom centré verticalement lorsqu'il ne prends pas toute la place.
donc je me retrouverais situé au même stade qu'au début.
Je clos le sujet car j'y ai passez trop de temps par rapport à l'importance du reste.
Si jamais je m'y repenche un jour je reviendrai vers toi.

Merci pour ton aide

[BootStrap] Flex overflow responsive

Responsive design en CSS avec Bootstrap

Discussions similaires

Partager

Partager