Skip to content

Instantly share code, notes, and snippets.

@yonixw

yonixw/index.html

Last active September 30, 2020 01:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save yonixw/36e9af5f0e1208b0ad0f79683d26a453 to your computer and use it in GitHub Desktop.
Save yonixw/36e9af5f0e1208b0ad0f79683d26a453 to your computer and use it in GitHub Desktop.
Download ZIP
Dock\Border layout problem with expending content
Raw
index.html
<html>
<head>
<title>Dock layout problem POC</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style><html>
<head>
<title>Dock layout problem POC</title><html>
<head>
<title>Dock layout problem POC</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.example {
padding: 5px;
background-color: lightgoldenrodyellow;
width: 90%;
border: solid black 1px;
}
</style>
</head>
<body>
<h1>Case 1 - Simple Text (Resizable Box)</h1>
<div class="example example1">
Hello World, Resize me There -->
</div>
<script>
$( function() {
$( ".example1" ).resizable();
} );
</script>
<h1>Case 2 - Simple Flex as dock</h1>
Using flex grow (short notation)
<div class="example example2" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
$( function() {
$( ".example2" ).resizable();
} );
</script>
<h1>Case 2.5 - Simple Flex as dock</h1>
<ul> Bug:
<li>
(CHROME) 100% height in content without parent (".example25") constant height, will be equal to 100vh
<ul>
<li><button onclick="toggle_example25_container()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example25" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
function toggle_example25_container() {
const e = document.querySelector(".example25");
e.style.height = e.style.height ? "" : "100px"
}
</script>
<h1>Case 3 - Border\Dock Layout using flex</h1>
<ul> Bug:
<li>
(CHROME) 100% width in "Fill" div will cause a little spillover on the right (probably because padd and margin)
<ul>
<li><button onclick="toggle_example3_fill()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example3" id="example3_container"
style="height: 100px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
height: 100%;
margin: 2px;
padding: 2px;
border: solid black 1px;
">
Fill
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( function() {
$( ".example3" ).resizable();
} );
function toggle_example3_fill(){
const e = document.querySelector("#example3_fill");
e.style.width = e.style.width ? "" : "100%"
}
</script>
<h1>Case 4 - Simple Flex With List - Working Case</h1>
<ul> both "max-height" + "height" are percentage except yellow container with constant height, and max-height is enforced.
<li><button onclick="add_list_ex4()">Add Item</button></li>
</ul>
<div class="example example4" style="height: 200px;">
<div style=" height: 100%; display: flex; flex: 0 1 0;
flex-direction: column;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
margin: 2px;
padding: 2px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example4">
Fill
</ul>
</div>
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Bottom<br/>
(get squashod)
</div>
</div>
</div>
<script>
ex4_counter = 0;
function add_list_ex4() {
const e = document.querySelector("#list_example4");
const item = document.createElement("li");
item.innerText = "#" + ex4_counter;
ex4_counter++;
e.appendChild(item);
}
</script>
<h1>Case 5 - Complex Flex <u>Without</u> Fixed Height</h1>
<ul>
<li>
<li>(Firefox) Max height is not enforced (consistent with grid case)</li>
<li>(CHROME) Max height is only enforced after some spillage!</li>
<li><button onclick="add_list_ex5()">Add Item</button></li>
</li>
</ul>
<div class="example example5" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example5">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex5_counter = 0;
function add_list_ex5() {
const e = document.querySelector("#list_example5");
const item = document.createElement("li");
item.innerText = "#" + ex5_counter;
ex5_counter++;
e.appendChild(item);
}
$( function() {
$( ".example5" ).resizable();
} );
</script>
<h1>Case 6 - Complex Flex <u>With</u> Fixed Height - Expected result</h1>
<ul>
<li>We make the "Fill" div height a const (not percentage)</li>
<li>
We update it to fill any resize (here by timer, can be by event)
</li>
<li><button onclick="add_list_ex6()">Add Item</button></li>
</ul>
<div class="example example6" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example6_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 138px;
max-height: 100%;
overflow: auto;
">
<ul id="list_example6">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex6_counter = 0;
setInterval(()=>{
const e = document.querySelector("#example6_fill");
// Get State (list+scroll):
const innerHTML = e.innerHTML;
const innerScroll = e.scrollTop;
// Make it fill
e.innerHTML = "";
e.style.height = "100%";
e.style.maxHeight = "100%";
// Get & Enforce fill heigt
const realHeight = window.getComputedStyle(e).height
e.style.height = realHeight;
e.style.maxHeight = realHeight;
// Restore State (list+scroll):
e.innerHTML = innerHTML;
e.scrollTop = innerScroll;
},1000)
function add_list_ex6() {
const e = document.querySelector("#list_example6");
const item = document.createElement("li");
item.innerText = "#" + ex6_counter;
ex6_counter++;
e.appendChild(item);
}
$( function() {
$( ".example6" ).resizable();
} );
</script>
<style>
.grid-body {
display: grid;
/*height: 200px;*/
grid-template: auto 1fr auto / auto 1fr auto
}
header {
background: lightpink;
padding: 5px;
grid-column: 1 / 4;
}
.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}
main {
background: coral;
grid-column: 2 / 3;
}
.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}
footer {
background: wheat;
padding: 5px;
text-align: center;
grid-column: 1 / 4;
}
</style>
<h1>Case 7 - Simple Grid case</h1>
Works out of the box, no spillage, no matter if const or percantage height.
<ul>
<li><button onclick="add_list_ex7()">Add Item</button></li>
<li><button onclick="toggle_ex7()">Toggle Const\Percentage hight</button></li>
</ul>
<div class="grid-body example example7" style="height: 300px;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main id="content_ex7"
style="height: 100%; max-height: 100%; overflow: auto;">
<ul id="list_example7">
Fill
</ul>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
<script>
ex7_counter = 0;
function add_list_ex7() {
const e = document.querySelector("#list_example7");
const item = document.createElement("li");
item.innerText = "#" + ex7_counter;
ex7_counter++;
e.appendChild(item);
}
function toggle_ex7() {
const e = document.querySelector("#content_ex7");
e.style.height =
(e.style.height == "100%") ?
window.getComputedStyle(e).height : "100%"
}
$( function() {
$( ".example7" ).resizable();
} );
</script>
<h1>Case 8 - Complex Grid case</h1>
<ul>
<li>(CHROME\FIREFOX) max-height (in %) is not enforced - Need the same solution (timer\resize event)</li>
<li><button onclick="add_list_ex8()">Add Item</button></li>
<li><button onclick="toggle_ex8()">Toggle Const\Percentage hight</button></li>
</ul>
<div class="grid-body example example8" style="height: 300px;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main
>
<div class="grid-body" style="width: 100%; height: 100%; padding: 0;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main id="content_ex8"
style="height: 100%; max-height: 100%; overflow: auto;">
<ul id="list_example8">
Fill
</ul>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
<script>
ex8_counter = 0;
function add_list_ex8() {
const e = document.querySelector("#list_example8");
const item = document.createElement("li");
item.innerText = "#" + ex8_counter;
ex8_counter++;
e.appendChild(item);
}
function toggle_ex8() {
const e = document.querySelector("#content_ex8");
e.style.height =
(e.style.height == "100%") ?
window.getComputedStyle(e).height : "100%"
}
$( function() {
$( ".example8" ).resizable();
} );
</script>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
.example {
padding: 5px;
background-color: lightgoldenrodyellow;
width: 90%;
border: solid black 1px;
}
</style>
</head>
<body>
<h1>Case 1 - Simple Text (Resizable Box)</h1>
<div class="example example1">
Hello World, Resize me There -->
</div>
<script>
$( function() {
$( ".example1" ).resizable();
} );
</script>
<h1>Case 2 - Simple Flex as dock</h1>
Using flex grow (short notation)
<div class="example example2" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
$( function() {
$( ".example2" ).resizable();
} );
</script>
<h1>Case 2.5 - Simple Flex as dock</h1>
<ul> Bug:
<li>
(CHROME) 100% height in content without parent (".example25") constant height, will be equal to 100vh
<ul>
<li><button onclick="toggle_example25_container()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example25" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
function toggle_example25_container() {
const e = document.querySelector(".example25");
e.style.height = e.style.height ? "" : "100px"
}
</script>
<h1>Case 3 - Border\Dock Layout using flex</h1>
<ul> Bug:
<li>
(CHROME) 100% width in "Fill" div will cause a little spillover on the right (probably because padd and margin)
<ul>
<li><button onclick="toggle_example3_fill()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example3" id="example3_container"
style="height: 100px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
height: 100%;
margin: 2px;
padding: 2px;
border: solid black 1px;
">
Fill
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( function() {
$( ".example3" ).resizable();
} );
function toggle_example3_fill(){
const e = document.querySelector("#example3_fill");
e.style.width = e.style.width ? "" : "100%"
}
</script>
<h1>Case 4 - Simple Flex With List - Working Case</h1>
<ul> both "max-height" + "height" are percentage except yellow container with constant height, and max-height is enforced.
<li><button onclick="add_list_ex4()">Add Item</button></li>
</ul>
<div class="example example4" style="height: 200px;">
<div style=" height: 100%; display: flex; flex: 0 1 0;
flex-direction: column;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
margin: 2px;
padding: 2px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example4">
Fill
</ul>
</div>
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Bottom<br/>
(get squashod)
</div>
</div>
</div>
<script>
ex4_counter = 0;
function add_list_ex4() {
const e = document.querySelector("#list_example4");
const item = document.createElement("li");
item.innerText = "#" + ex4_counter;
ex4_counter++;
e.appendChild(item);
}
</script>
<h1>Case 5 - Complex Flex <u>Without</u> Fixed Height</h1>
<ul> Bug:
<li>
(CHROME) Max height is only enforced after some spillage!
<ul>
<li><button onclick="add_list_ex5()">Add Item</button></li>
</ul>
</li>
</ul>
<div class="example example5" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example5">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex5_counter = 0;
function add_list_ex5() {
const e = document.querySelector("#list_example5");
const item = document.createElement("li");
item.innerText = "#" + ex5_counter;
ex5_counter++;
e.appendChild(item);
}
$( function() {
$( ".example5" ).resizable();
} );
</script>
<h1>Case 6 - Complex Flex <u>With</u> Fixed Height - Expected result</h1>
<ul>
<li>We make the "Fill" div height a const (not percentage)</li>
<li>
We update it to fill any resize (here by timer, can be by event)
</li>
<li><button onclick="add_list_ex6()">Add Item</button></li>
</ul>
<div class="example example6" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example6_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 138px;
max-height: 100%;
overflow: auto;
">
<ul id="list_example6">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex6_counter = 0;
setInterval(()=>{
const e = document.querySelector("#example6_fill");
// Get State (list+scroll):
const innerHTML = e.innerHTML;
const innerScroll = e.scrollTop;
// Make it fill
e.innerHTML = "";
e.style.height = "100%";
e.style.maxHeight = "100%";
// Get & Enforce fill heigt
const realHeight = window.getComputedStyle(e).height
e.style.height = realHeight;
e.style.maxHeight = realHeight;
// Restore State (list+scroll):
e.innerHTML = innerHTML;
e.scrollTop = innerScroll;
},1000)
function add_list_ex6() {
const e = document.querySelector("#list_example6");
const item = document.createElement("li");
item.innerText = "#" + ex6_counter;
ex6_counter++;
e.appendChild(item);
}
$( function() {
$( ".example6" ).resizable();
} );
</script>
<style>
.grid-body {
display: grid;
/*height: 200px;*/
grid-template: auto 1fr auto / auto 1fr auto
}
header {
background: lightpink;
padding: 5px;
grid-column: 1 / 4;
}
.left-sidebar {
background: lightblue;
grid-column: 1 / 2;
}
main {
background: coral;
grid-column: 2 / 3;
}
.right-sidebar {
background: yellow;
grid-column: 3 / 4;
}
footer {
background: wheat;
padding: 5px;
text-align: center;
grid-column: 1 / 4;
}
</style>
<h1>Case 7 - Simple Grid case</h1>
Works out of the box, no spillage, no matter if const or percantage height.
<ul>
<li><button onclick="add_list_ex7()">Add Item</button></li>
<li><button onclick="toggle_ex7()">Toggle Const\Percentage hight</button></li>
</ul>
<div class="grid-body example example7" style="height: 300px;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main id="content_ex7"
style="height: 100%; max-height: 100%; overflow: auto;">
<ul id="list_example7">
Fill
</ul>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
<script>
ex7_counter = 0;
function add_list_ex7() {
const e = document.querySelector("#list_example7");
const item = document.createElement("li");
item.innerText = "#" + ex7_counter;
ex7_counter++;
e.appendChild(item);
}
function toggle_ex7() {
const e = document.querySelector("#content_ex7");
e.style.height =
(e.style.height == "100%") ?
window.getComputedStyle(e).height : "100%"
}
$( function() {
$( ".example7" ).resizable();
} );
</script>
<h1>Case 8 - Complex Grid case</h1>
<ul>
<li>(CHROME\FIREFOX) max-height (in %) is not enforced - Need the same solution (timer\resize event)</li>
<li><button onclick="add_list_ex8()">Add Item</button></li>
<li><button onclick="toggle_ex8()">Toggle Const\Percentage hight</button></li>
</ul>
<div class="grid-body example example8" style="height: 300px;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main
>
<div class="grid-body" style="width: 100%; height: 100%; padding: 0;">
<header>
<h1 >Header.com</h1>
</header>
<div class="left-sidebar" >Left Sidebar</div>
<main id="content_ex8"
style="height: 100%; max-height: 100%; overflow: auto;">
<ul id="list_example8">
Fill
</ul>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
</main>
<div class="right-sidebar" >Right Sidebar</div>
<footer >Footer Content — Header.com 2020</footer>
</div>
<script>
ex8_counter = 0;
function add_list_ex8() {
const e = document.querySelector("#list_example8");
const item = document.createElement("li");
item.innerText = "#" + ex8_counter;
ex8_counter++;
e.appendChild(item);
}
function toggle_ex8() {
const e = document.querySelector("#content_ex8");
e.style.height =
(e.style.height == "100%") ?
window.getComputedStyle(e).height : "100%"
}
$( function() {
$( ".example8" ).resizable();
} );
</script>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
.example {
padding: 5px;
background-color: lightgoldenrodyellow;
width: 90%;
border: solid black 1px;
}
</style>
</head>
<body>
<h1>Case 1 - Simple Text (Resizable Box)</h1>
<div class="example example1">
Hello World, Resize me There -->
</div>
<script>
$( function() {
$( ".example1" ).resizable();
} );
</script>
<h1>Case 2 - Simple Flex as dock</h1>
Using flex grow (short notation)
<div class="example example2" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
$( function() {
$( ".example2" ).resizable();
} );
</script>
<h1>Case 2.5 - Simple Flex as dock</h1>
<ul> Bug:
<li>
(CHROME) 100% height in content without parent (".example25") constant height, will be equal to 100vh
<ul>
<li><button onclick="toggle_example25_container()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example25" style="height: 100px;">
<div style=" height: 100%; display: flex; flex: 1 0;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Left dock<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
width: 100%;
margin: 2px;
padding: 2px;
">
Fill
</div>
</div>
</div>
<script>
function toggle_example25_container() {
const e = document.querySelector(".example25");
e.style.height = e.style.height ? "" : "100px"
}
</script>
<h1>Case 3 - Border\Dock Layout using flex</h1>
<ul> Bug:
<li>
(CHROME) 100% width in "Fill" div will cause a little spillover on the right (probably because padd and margin)
<ul>
<li><button onclick="toggle_example3_fill()">Toggle</button></li>
</ul>
</li>
</ul>
<div class="example example3" id="example3_container"
style="height: 100px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
height: 100%;
margin: 2px;
padding: 2px;
border: solid black 1px;
">
Fill
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$( function() {
$( ".example3" ).resizable();
} );
function toggle_example3_fill(){
const e = document.querySelector("#example3_fill");
e.style.width = e.style.width ? "" : "100%"
}
</script>
<h1>Case 4 - Simple Flex With List - Working Case</h1>
<ul> both "max-height" + "height" are percentage except yellow container with constant height, and max-height is enforced.
<li><button onclick="add_list_ex4()">Add Item</button></li>
</ul>
<div class="example example4" style="height: 200px;">
<div style=" height: 100%; display: flex; flex: 0 1 0;
flex-direction: column;">
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top<br/>
(get squashod)
</div>
<div style="
background-color: lightblue;
margin: 2px;
padding: 2px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example4">
Fill
</ul>
</div>
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Bottom<br/>
(get squashod)
</div>
</div>
</div>
<script>
ex4_counter = 0;
function add_list_ex4() {
const e = document.querySelector("#list_example4");
const item = document.createElement("li");
item.innerText = "#" + ex4_counter;
ex4_counter++;
e.appendChild(item);
}
</script>
<h1>Case 5 - Complex Flex <u>Without</u> Fixed Height</h1>
<ul> Bug:
<li>
(CHROME) Max height is only enforced after some spillage!
<ul>
<li><button onclick="add_list_ex5()">Add Item</button></li>
</ul>
</li>
</ul>
<div class="example example5" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example3_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 100%;
max-height: 100%;
overflow: auto;
">
<ul id="list_example5">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex5_counter = 0;
function add_list_ex5() {
const e = document.querySelector("#list_example5");
const item = document.createElement("li");
item.innerText = "#" + ex5_counter;
ex5_counter++;
e.appendChild(item);
}
$( function() {
$( ".example5" ).resizable();
} );
</script>
<h1>Case 6 - Complex Flex <u>With</u> Fixed Height - Expected result</h1>
<ul>
<li>We make the "Fill" div height a const (not percentage)</li>
<li>
We update it to fill any resize (here by timer, can be by event)
</li>
<li><button onclick="add_list_ex6()">Add Item</button></li>
</ul>
<div class="example example6" style="height: 200px;">
<div class="top" style="display: flex; flex: 1 0; flex-direction: column; height: 100%;" >
<div style="
background-color: lightsalmon;
margin: 2px;
padding: 2px;
">
Top Dock
</div>
<div class="left"
style="display: flex; flex: 1 0; flex-direction: row; height: 100%;">
<div style="
background-color: rgb(255, 253, 122);
margin: 2px;
padding: 2px;
">
Left Dock
</div>
<div class="right"
style="display: flex; flex: 1 0; flex-direction: row-reverse; height: 100%;">
<div style="
background-color: rgb(122, 213, 255);
margin: 2px;
padding: 2px;
">
right Dock
</div>
<div class="bottom"
style="display: flex; flex: 1 0; flex-direction: column-reverse; height: 100%;">
<div style="
background-color: rgb(255, 122, 140);
margin: 2px;
padding: 2px;
">
Bottom Dock
</div>
<div
id="example6_fill"
style="
background-color: lightblue;
margin: 2px;
padding: 2px;
border: solid black 1px;
height: 138px;
max-height: 100%;
overflow: auto;
">
<ul id="list_example6">
Fill
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
ex6_counter = 0;
setInterval(()=>{
const e = document.querySelector("#example6_fill");
// Get State (list+scroll):
const innerHTML = e.innerHTML;
const innerScroll = e.scrollTop;
// Make it fill
e.innerHTML = "";
e.style.height = "100%";
e.style.maxHeight = "100%";
// Get & Enforce fill heigt
const realHeight = window.getComputedStyle(e).height
e.style.height = realHeight;
e.style.maxHeight = realHeight;
// Restore State (list+scroll):
e.innerHTML = innerHTML;
e.scrollTop = innerScroll;
},1000)
function add_list_ex6() {
const e = document.querySelector("#list_example6");
const item = document.createElement("li");
item.innerText = "#" + ex6_counter;
ex6_counter++;
e.appendChild(item);
}
$( function() {
$( ".example6" ).resizable();
} );
</script>
<br/>
<br/>
<br/>
<br/>
</body>
</html>
@yonixw
Copy link
Author

yonixw commented Sep 30, 2020

Solution is to add min-height: 0 for all inner div or `main. as seen here: https://stackoverflow.com/a/48211660

Not sure why it's not necessary for case 4

@yonixw
Copy link
Author

yonixw commented Sep 30, 2020

Also case 5 is still not explained, why scrollbar only after some spillage in chrome? (probably connected to padds and margins)

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