Bonjour à tous. 
L'idée générale est d'avoir dans une DIV aux dimensions connues contenant :
- Un titre (hauteur inconnue)
- Une description (hauteur inconnue)
- Une liste avec un scroll
- Un bouton tout en bas (hauteur fixe connue)
Ça a l'air simple, mais une fois sur le papier, rien ne s'aligne comme il faut.
Voici ce que j'essaye de réaliser.
Sur Firefox et Chrome pas de souci évidemment
Je n'arrive pas à afficher quelque chose de semblable sur IE10. Nos clients ont ce navigateur.
je n'ai pas d'obligation d'utiliser des flexbox. C'était une bonne idée, mais cela ne marche pas.
J'ai testé le plugin "flexibility", mais il n'est pas compatible IE10 (uniquement IE8 et 9).
Si quelqu'un a une manière pour réaliser cela de manière cross-browser alors chapeau.
Voici le code, directement exploitable dans un fichier HTML :
Modifié par zougui (19 May 2016 - 15:24)
L'idée générale est d'avoir dans une DIV aux dimensions connues contenant :
- Un titre (hauteur inconnue)
- Une description (hauteur inconnue)
- Une liste avec un scroll
- Un bouton tout en bas (hauteur fixe connue)
Ça a l'air simple, mais une fois sur le papier, rien ne s'aligne comme il faut.
Voici ce que j'essaye de réaliser.
Sur Firefox et Chrome pas de souci évidemment
Je n'arrive pas à afficher quelque chose de semblable sur IE10. Nos clients ont ce navigateur.
je n'ai pas d'obligation d'utiliser des flexbox. C'était une bonne idée, mais cela ne marche pas.
J'ai testé le plugin "flexibility", mais il n'est pas compatible IE10 (uniquement IE8 et 9).
Si quelqu'un a une manière pour réaliser cela de manière cross-browser alors chapeau.
Voici le code, directement exploitable dans un fichier HTML :
<!DOCTYPE html>
<html>
<HEAD>
<meta charset="UTF-8">
<style>
.reportTile
{
float : left;
height : 130px;
margin-bottom : 10px;
margin-right : 20px;
margin-top : 10px;
position : relative;
width : 160px;
}
.flex-container
{
height : 100%;
display : -webkit-box;
display : -moz-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
-webkit-box-direction : normal;
-moz-box-direction : normal;
-webkit-box-orient : horizontal;
-moz-box-orient : horizontal;
-webkit-flex-direction : column;
-ms-flex-direction : column;
flex-direction : column;
-webkit-flex-wrap : nowrap;
-ms-flex-wrap : nowrap;
flex-wrap : nowrap;
-webkit-box-pack : start;
-moz-box-pack : start;
-webkit-justify-content : flex-start;
-ms-flex-pack : center;
justify-content : flex-start;
-webkit-align-content : stretch;
-ms-flex-line-pack : stretch;
align-content : stretch;
-webkit-box-align : center;
-moz-box-align : center;
-webkit-align-items : center;
-ms-flex-align : center;
align-items : center;
}
.buttonBlue
{
background : rgba(0, 0, 0, 0) linear-gradient(to bottom, #66abd1 0px, #197caf 100%) repeat scroll 0 0;
border : 1px solid #1e70a7;
border-radius : 3px;
color : #fff;
cursor : pointer;
font-family : Calibri,sans-serif;
font-size : 15px;
line-height : 24px;
padding : 5px 16px;
text-align : center;
text-decoration : none;
}
.buttonBlue:hover
{
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #75bae0 0px, #288abd 100%) repeat scroll 0 0;
}
</style>
</HEAD>
<body>
<div class="reportTile">
<div id="TuileReportHover196" style="position:absolute; left:20px; top:20px; width:240px; height:208px; background:#FFF; border:2px solid #B1086A; border-radius:6px; z-index:2; visibility:visible;">
<div class="flex-container" style="float:left; width:240px; height:208px;">
<!-- LE TITRE -->
<div style="width:240px; max-width:100%; text-align:left; display:table-row;">
<div style="padding:3px 5px 5px; font-family:Calibri,sans-serif; color:#000080; font-size:17px; font-weight:bold; line-height:17px;">
Rapport avec plein de graphes qu'il faut affficher avec des scrolls
</div>
</div>
<!-- LA DESCRIPTION -->
<div style="width:240px; max-width:100%; text-align:left; display:table-row;">
<div style="padding:3px 2px 5px 5px; margin-left:5px; margin-right:5px; border-top:1px dashed #404040; font-family:Calibri,sans-serif; color:#404040; font-size:10px; font-style:italic;">
Une jolie description
</div>
</div>
<!-- LISTE DES GRAPHES -->
<div style="width:240px; max-width:100%; text-align:left; overflow-y:auto; margin-bottom:30px; display:block;">
<div id="ListGraphs196" style="padding:0 0 5px 10px; font-family:Calibri,sans-serif; color:#404040; font-size:9px;">
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10723_SDV_Colombes - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10728_SDV_Marseille-Med - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10732_SDV_Orleans - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10719_SDV_NordSud-Paris - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10718_SDV_NordSud-Rouen - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10733_SDV_Chartres - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10736_SDV_Blois-Fosse - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10737_SDV_Tours - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10738_SDV_Le-Mans - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10740_SDV_Poitiers - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10747_SDV_Le-Havre - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10748_SDV_Rouen - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10748_SDV_Rouen-RCS - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10750_SDV_C-O-Cont.-Pharma - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10751_SDV_Le Trait - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10754_SDV_Dunkerque-Transinor - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10756_SDV_Rungis - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">11573_C-O-SOGERMA - Volume WAN-LAN</div>
</div>
</div>
</div>
<!-- BOUTON DE GÉNÉRATION -->
<div style='width:240px; max-width:100%; height:25px; position:absolute; bottom:0; left:0;' id="ButtonGenerate196">
<div class="buttonBlue" style="line-height:18px; margin:0 auto 3px; padding:1px 10px; width:40px; font-size:12px;">Générer</div>
</div>
</div>
</div>
</div>
<div class="reportTile">
<div id="TuileReportHover197" style="position:absolute; left:200px; top:20px; width:240px; height:208px; background:#FFF; border:2px solid #B1086A; border-radius:6px; z-index:2; visibility:visible;">
<div class="flex-container" style="float:left; width:240px; height:208px;">
<!-- LE TITRE -->
<div style="width:240px; max-width:100%; text-align:left; display:table-row;">
<div style="padding:3px 5px 5px; font-family:Calibri,sans-serif; color:#000080; font-size:17px; font-weight:bold; line-height:17px;">
Rapport où il n'y a que 3 graphes et pas de description
</div>
</div>
<!-- LA DESCRIPTION (Pas de description ici, mais on garde le trait séparateur) -->
<div style="width:240px; max-width:100%; text-align:left; display:table-row;">
<div style="padding:3px 2px 5px 5px; margin-left:5px; margin-right:5px; border-top:1px dashed #404040; font-family:Calibri,sans-serif; color:#404040; font-size:10px; font-style:italic;">
</div>
</div>
<!-- LISTE DES GRAPHES -->
<div style="width:240px; max-width:100%; text-align:left; overflow-y:auto; margin-bottom:30px; display:block;">
<div id="ListGraphs197" style="padding:0 0 5px 10px; font-family:Calibri,sans-serif; color:#404040; font-size:9px;">
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10723_SDV_Colombes - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">10756_SDV_Rungis - Volume WAN-LAN</div>
</div>
<div style="width:100%; position:relative; padding:2px 0;">
<img src="Images/GraphType-Areas.png" style="height:11px; width:11px; padding-right:2px; position:absolute;">
<div style="padding-left:16px;">11573_C-O-SOGERMA - Volume WAN-LAN</div>
</div>
</div>
</div>
<!-- BOUTON DE GÉNÉRATION -->
<div style='width:240px; max-width:100%; height:25px; position:absolute; bottom:0; left:0;' id="ButtonGenerate197">
<div class="buttonBlue" style="line-height:18px; margin:0 auto 3px; padding:1px 10px; width:40px; font-size:12px;">Générer</div>
</div>
</div>
</div>
</div>
</body>
</html>
Modifié par zougui (19 May 2016 - 15:24)