Bonjour,
j'ai un problème uniquement sous IE (testé en version 11 et emu 9/10) lorsque je supprime un contenu HTML d'un DIV (#dest) ayant un style overflow:auto et un min-height:21px, si je supprime juste après les classes d'une liste de personne (#list).
La hauteur du conteneur DIV reste affiché à sa hauteur de remplissage.
Je sais c'est bizarre mais je n'arrive pas à comprendre.
Aucun problème sous d'autres navigateurs.
Voici le code, pour reproduire le problème, il faut cliquer sur les boutons "Select all" puis sur "Clear all and deselect"
Merci pour votre aide[/i][/i]
Modifié par jparia (21 Sep 2015 - 16:04)
j'ai un problème uniquement sous IE (testé en version 11 et emu 9/10) lorsque je supprime un contenu HTML d'un DIV (#dest) ayant un style overflow:auto et un min-height:21px, si je supprime juste après les classes d'une liste de personne (#list).
La hauteur du conteneur DIV reste affiché à sa hauteur de remplissage.
Je sais c'est bizarre mais je n'arrive pas à comprendre.
Aucun problème sous d'autres navigateurs.
Voici le code, pour reproduire le problème, il faut cliquer sur les boutons "Select all" puis sur "Clear all and deselect"
<!DOCTYPE html>
<html>
<head>
<title>CSS</title>
<style>
* {
margin: 0px;
padding: 0px;
font-family: Verdana;
}
div {
margin: 5px;
}
ul {
margin: 5px;
max-height: 200px;
overflow: auto;
width: 500px;
}
ul li.selected {
font-weight: bold;
}
.dest {
width: 500px;
min-height: 21px;
max-height: 120px;
overflow: auto;
border: 1px solid #ccc;
background-color: #f9f9f0;
padding: 3px;
}
.dest span {
display: inline-block;
background-color: #fff;
border-radius: 2px;
border: 1px solid #ccc;
margin: 2px;
padding: 0px 2px 0px 2px;
line-height: 21px;
height: auto;
}
</style>
<script>
window.onload = function(){
document.getElementById("btclear").onclick = function(){
document.getElementById("dest").innerHTML = "";
};
document.getElementById("btclearplus").onclick = function(){
document.getElementById("dest").innerHTML = "";
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
};
document.getElementById("btall").onclick = function(){
for(var i = 0; i < 50; i++) {
var span = document.createElement("span");
span.innerHTML = "first name " + i + " last name " + i;
document.getElementById("dest").appendChild(span);
}
var ul = document.getElementById("list");
var lis = ul.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].className = "selected";
}
};
for(var i = 0; i < 50; i++) {
var li = document.createElement("li");
li.innerHTML = "nom" + i + " prenom" + i;
document.getElementById("list").appendChild(li);
}
}
</script>
</head>
<body>
<div id="dest" class="dest"></div>
<div>
<ul id="list"></ul>
</div>
<div>
<button id="btall">Select all</button>
<button id="btclear">Clear all</button>
<button id="btclearplus">Clear all and deselect</button>
</div>
</body>
</html>
Merci pour votre aide[/i][/i]
Modifié par jparia (21 Sep 2015 - 16:04)