Dimensions d'un graphique initialement caché
Bonjour à tous et toutes,
Voila je débute en développement web et je bloque sur un problème.
J'ai quatre onglets. Quand je clique sur chacun, cela m'affiche un graphique.
Tout se passe bien à un détail près. Le dimensionnement des graphiques qui sont cachés initialement n'est pas correcte (j'ai changé l'onglet affiché par défaut pour vérifier que ça venait bien de là).
J'ai tenté pas mal d'options... mais là je sèche.
En modifiant le css et/ou le html et/ou le javascript.
Mon script :
Code:
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
|
<script type="text/javascript">
var Onglet_afficher = 1;
function Affiche(Nom)
{
document.getElementById('affiche-contenu-'+Onglet_afficher).className = 'inactif onglet';
document.getElementById('affiche-contenu-'+Nom).className = 'affiche-contenu-1 onglet';
document.getElementById('contenu_'+Onglet_afficher).style.display = 'none';
document.getElementById('contenu_'+Nom).style.display = 'block';
//document.getElementById('contenu_'+Nom).style.height='100%';
Onglet_afficher = Nom;
}
</script>
<ul class="conteneur-onglets" >
<li class="inactif onglet" id="affiche-contenu-1" onclick="javascript:Affiche('1');">Spend</li>
<li class="inactif onglet" id="affiche-contenu-2" onclick="javascript:Affiche('2');">Impressions</li>
<li class="inactif onglet" id="affiche-contenu-3" onclick="javascript:Affiche('3');">Clicks</li>
<li class="inactif onglet" id="affiche-contenu-4" onclick="javascript:Affiche('4');">Goal Achievment</li>
</ul>
<div class="contenu" id="contenu_1">
<div id="placeholderSpend" class="demo-placeholder"></div>
</div>
<div class="contenu" id="contenu_2" >
<div id="placeholderImpressions" class="demo-placeholder" ></div>
</div>
<div class="contenu" id="contenu_3">
<div id="placeholderCliks" class="demo-placeholder"></div>
</div>
<div class="contenu" id="contenu_4">
<div id="placeholderGoalAchievment" class="demo-placeholder"></div>
</div>
<script type="text/javascript">Affiche(Onglet_afficher);</script> |
Le css :
Code:
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
|
<style type="text/css">
.conteneur-onglets
{
margin: 0;
padding:0 0 0 5px;
}
.onglet
{
display:inline-block;
margin:5px 2px 0 2px;
padding:5px 10px ;
border:1px solid #AAA;
border-bottom:none;
border-radius:5px 5px 0 0;
-webkit-border-radius:4px 4px 0 0;
-moz-border-radius:4px 4px 0 0;
color:#555;
cursor: pointer;
font-weight:bold;
}
.inactif
{
background:#EEE;
}
.inactif:hover
{
background:#AAA;
}
.affiche-contenu-1
{
background:white;
border-bottom:2px solid white;
padding-bottom:4px;
cursor:text;
}
.contenu
{
background-color:white;
margin-top:-1px;
padding:5px;
display:none;
border:1px solid #AAA;
border-radius:4px;
-webkit-border-radius:4px;
-moz-border-radius:4px;
color:#555;
cursor: text;
overflow:hidden;
}
</style> |
Bonne soirée à vous ! Et merci d'avance pour toute aide apportée !
