I am in need of a versatile column layout where multiple widgets are stacked vertically, adjusting their size dynamically. Each widget consists of a title and scrollable content. The last widget should have the ability to collapse when its title is clicked.
One issue I am facing is that when I collapse the widget, part of the title becomes obscured.
To see the problem in action, click on "Batch runs" at this link: http://jsfiddle.net/stoefln/Ls0aqnvf/8/
$('.batchRunsTitle').on('click', function() {
$('.batchRuns').toggle()
})* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
width: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="column" style="height: calc(100% - 80px); background: #AAA; display: flex; flex-direction: column; ">
<div class="batchView" style="flex-grow: 1; display: flex; flex-direction: column; border: 1px solid #F00; overflow: hidden;">
<div class="header" style="">widget title 1</div>
<div class="tests" style="flex-basis: 70%; border: 1px solid #F0F; overflow: auto;">test<br/>...For visual reference, here are screenshots of the widget in both states:
Open:
https://i.stack.imgur.com/ZzkIpm.png
Collapsed: