Skip to content

Instantly share code, notes, and snippets.

@nishanths
Created December 21, 2017 17:39
Show Gist options
  • Save nishanths/8e0cd06288544345b156db1b1fa94185 to your computer and use it in GitHub Desktop.
Save nishanths/8e0cd06288544345b156db1b1fa94185 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>table-cell</title>
<style>
ul {
background: red; /* purely for visualizing */
}
li.i {
display: table-cell;
}
li {
display: inline-block;
height: 60px;
}
</style>
</head>
<body>
<script>
console.log(`
on Chrome:
(1) notice the initial height
(2) click on "toggle" to toggle the "display: table-cell" property
(3) the initial height isn't restored when you toggle
`);
</script>
<button id="b">toggle</button>
<ul>
<li class="i"></li>
<li class="i"></li>
</ul>
<script>
var li = document.querySelector("li");
function toggle() { li.classList.toggle("i"); }
b.addEventListener("click", toggle);
</script>
</body>
</html>
@nishanths
Copy link
Author

Chrome Version 60.0.3112.113 (Official Build) (64-bit)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment