Discussion :

[Tamzoro]

J'ai 6 graphiques dans mon HTML , mes 6 graphiques s'affichent correctement ci dessous:



Mon problème est que si l'utilisateur a juste les graphiques 0,2 et 5, l'affichage n'est pas adapté correctement. Je me demande s'il est possible de mettre ces 3 graphiques sur une ligne pour ce type de cas?



En gros, dans la première ligne, quoi qu'il arrive, l'utilisateur possèdera 3 graphiques d'office et ils doivent apparaître sur la première ligne seulement.

Je n'ai aucune idée de comment faire ça? Peut-être avec un "float-left" ? Cependant, si j'ai 5 graphes, ils sont tous sur une ligne ce n'est pas ce que je veux.

Si vous avez une idée, je suis preneur !

Un grand merci

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
<div class="container-adapt-h">    
        <div class="col-12 col-lg-4" [hidden]="!securities[0]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <div id="chartdiveq0" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
 
        <div class="col-12 col-lg-4" [hidden]="!securities[1]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <div id="chartdiveq1" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
 
        <div class="col-12 col-lg-4" [hidden]="!securities[2]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <div id="chartdiveq2" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
 
    </div>
 
    <div class="container-adapt-h">  
 
        <div class="col-12 col-lg-4" [hidden]="!securities[3]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <div id="chartdiveq3" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
    </div>
 
        <div class="col-12 col-lg-4" [hidden]="!securities[4]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0">
                    <div id="chartdiveq4" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
 
        <div class="col-12 col-lg-4" [hidden]="!securities[5]?.historyExist">
            <div class="card mb-4">
                <div class="card-body p-0" >
                    <div id="chartdiveq5" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

[jreaux62]

Bonjour,

C'est tout simple :

• mets les 6 dans un seul container (supprime les lignes 26 et 28 de ton code ci-dessus).
• ajoute la classe "row"

Code html :

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

<div class="row container-adapt-h">

on peut aussi mieux adapter chaque graphe (1, 2 ou 3 par ligne) :

Code html :

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

        <div class="col-12 col-md-6 col-lg-4" ...>

[Tamzoro]

Bonjour,

Merci beaucoup ça fonctionne, j'étais bloqué depuis 2 jours !

J'aimerai bien comprendre ce que fait la class "row" ?

[jreaux62]

Bonjour,

lis la DOC Bootstrap :

• Grid system

D'un point de vue "technique, le CSS est :

Code css :

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

1
2
3
4
5
6
.row {
    display: flex; /* FLEXBOX */
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

voir :

• flex-wrap

et

Code css :

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

1
2
3
4
5
6
.col, .col-1,................, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

[Tamzoro]

Bonjour,

Merci pour toutes ces précisions. Je vais aller consulter la doc davantage.