I am trying to craft this HTML/css, so that the "Output Sections" dropdown expands the buttons underneath it, without expanding the whitespace that surrounds all the tabs. In other words, I would like the expanded tabs to show, but I don't want the grey content section below them to be pushed down due to the expanding tab container. I've been messing with the overflow property but to no avail.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8, width=device-width, initial-scale=1.0" />
<title>Test Run Results</title>
<style>
@charset "UTF-8";
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
/* overflow: scroll; */
}
.dropdown {
position: relative;
display: inline-block;
/* display: block; */
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
position: relative;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
pre,
.pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 4px 0;
overflow: auto;
overflow-wrap: break-word;
word-break: break-all;
word-wrap: break-word;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-right: 4px;
}
.tab button {
border-radius: 3px;
background-color: inherit;
float: left;
border: 1px solid #ccc;
border-color: lightgrey;
border-style;
border-radius: 2px;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 15px
}
.tablinks {
font-family: "Arial", sans-serif;
font-size: 15px opacity: 0.4;
}
.tabcontent {
background-color: #ddd;
display: none;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect .25s;
}
.tabcontent button:nth-child(even) {
background-color: #ddd;
}
.tabcontent button:nth-child(odd) {
background-color: #f1f1f1;
}
.tab button:hover {
background-color: #ddd;
opacity: 0.65;
transition: 0.3s;
}
.tab button.focus {
background-color: #ccc;
opacity: 1.0;
transition: 0.3s;
}
.tab button.active {
opacity: 1.0;
transition: 0.3s;
}
*/ @-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: .5;
}
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1.5;
}
}
.collapsible {
font-weight: normal;
font-family: "Arial", sans-serif;
background-color: #f1f1f1;
cursor: pointer;
width: 100%;
border: none;
padding: 4px 4px;
text-align: left;
outline: none;
font-size: 14px;
white-space: normal;
box-shadow: 0px 0px 1px 1px #bbb;
}
.active,
.collapsible:hover {
background-color: #ccc;
transition: 0.35s;
}
.content {
display: none;
overflow: auto;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect .25s;
}
.space {
width: 4px;
height: auto;
display: inline-block;
}
.line {
background-color: black;
height: auto;
width: 5px;
}
p {
font-size: 14px;
font-family: "Arial", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Arial", sans-serif;
}
.body_foreground {
color: #000000;
}
.body_background {
background-color: #EEEEEE;
}
</style>
</head>
<body style="font-family: 'Helvetica, Arial, sans-serif';">
<div >
<div >
<button style="background-color: rgba(0, 0, 255, 0.33)" id="defaultOpen" onclick="openTab(event, 'About')">
About</button
><button
style="background-color: rgba(255, 10, 10, 0.75)"
onclick="openTab(event, 'Failures')"
>
Failures
</button>
<div >
<button style="color: white; background-color: gray">
Output Sections
</button>
<div id="myDropdown" >
<p>
<button style="background-color: #daeaf6; width: 140px; max-width: 250px" onclick="openTab(event, 'summary_section')">
summary_section
</button>
</p>
<p>
<button style="background-color: rgba(255, 10, 10, 0.50); width: 140px; max-width: 250px" onclick="openTab(event, 'failures_section')">
failures_section
</button>
</p>
</div>
</div>
<button style="background-color: rgba(0, 0, 255, 0.33)" onclick="openTab(event, 'Full Output')">
Full Output
</button>
</div>
</div>
<div id="About" >
<p></p>
<hr />
<h5>Final Results:</h5>
<pre><b> 1 failed, 62 deselected in 0.96s
</b></pre>
<hr />
<h5>Test results generated:</h5>
<p>2022-09-04 03:11:47</p>
<h5>This report generated:</h5>
<p>2022-09-04 03:12:47</p>
<h5>pytest-tui version:</h5>
<p>1.3.2</p>
</div>
<div id="Failures" >
<button type="button" style="border: none; outline: none;">
demo-tests/test_0.py::test0_fail_1
</button>
<div >
<pre>
Test Fail 1!
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre
>
</div>
</div>
<div id="summary_section" >
<pre>
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================
================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251 gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251 gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected
demo-tests/test_0.py::test0_fail_1 FAILED [100%]
============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
</pre
>
</div>
<div id="failures_section" >
<pre>
===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre
>
</div>
<div id="Full Output" >
<pre>
================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251 gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251 gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected
demo-tests/test_0.py::test0_fail_1 FAILED [100%]
===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================
</pre
>
</div>
<script>
function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i ) { tabcontent[i].style.display = "none"; } tablinks = document.getElementsByClassName("tablinks"); for (i = 0; i < tablinks.length; i ) { tablinks[i].className = tablinks[i].className.replace(" active", ""); } document.getElementById(tabName).style.display = "block"; evt.currentTarget.className = " active"; }
</script>
<script>
document.getElementById("defaultOpen").click();
</script>
<script>
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i ) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }
</script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function myFunction() { document.getElementById("myDropdown").classList.toggle("show"); }
</script>
</body>
</html>CodePudding user response：
You can follow these styles with some explanation
.tab {
/*overflow: hidden;*/ /*Remove this to create an overlay on menu items*/
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-right: 4px;
}
.dropdown {
position: relative; /*Keep sub-menu aligned with the main menu item*/
display: inline-block;
/* display: block; */
}
.dropdown-content {
display: none;
position: absolute; /*Overlay for sub-menu items*/
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 47px; /*Top gap with the main item*/
}
.dropdown-content p {
margin: 0; /*Removed useless gaps on sub-menu items*/
}
The key factor is removing overflow: hidden in .tab and using position: absolute on .dropdown-content
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8, width=device-width, initial-scale=1.0" />
<title>Test Run Results</title>
<style>
@charset "UTF-8";
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
/* overflow: scroll; */
}
.dropdown {
position: relative; /*Keep sub-menu aligned with the main menu item*/
display: inline-block;
/* display: block; */
}
.dropdown-content {
display: none;
position: absolute; /*Overlay for sub-menu items*/
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
top: 47px; /*Top gap with the main item*/
}
.dropdown-content p {
margin: 0; /*Removed useless gaps on sub-menu items*/
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
}
pre,
.pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 4px 0;
overflow: auto;
overflow-wrap: break-word;
word-break: break-all;
word-wrap: break-word;
}
.tab {
/*overflow: hidden;*/ /*Remove this to create an overlay on menu items*/
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-right: 4px;
}
.tab button {
border-radius: 3px;
background-color: inherit;
float: left;
border: 1px solid #ccc;
border-color: lightgrey;
border-style;
border-radius: 2px;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 15px
}
.tablinks {
font-family: "Arial", sans-serif;
font-size: 15px opacity: 0.4;
}
.tabcontent {
background-color: #ddd;
display: none;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect .25s;
}
.tabcontent button:nth-child(even) {
background-color: #ddd;
}
.tabcontent button:nth-child(odd) {
background-color: #f1f1f1;
}
.tab button:hover {
background-color: #ddd;
opacity: 0.65;
transition: 0.3s;
}
.tab button.focus {
background-color: #ccc;
opacity: 1.0;
transition: 0.3s;
}
.tab button.active {
opacity: 1.0;
transition: 0.3s;
}
*/ @-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: .5;
}
}
@keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1.5;
}
}
.collapsible {
font-weight: normal;
font-family: "Arial", sans-serif;
background-color: #f1f1f1;
cursor: pointer;
width: 100%;
border: none;
padding: 4px 4px;
text-align: left;
outline: none;
font-size: 14px;
white-space: normal;
box-shadow: 0px 0px 1px 1px #bbb;
}
.active,
.collapsible:hover {
background-color: #ccc;
transition: 0.35s;
}
.content {
display: none;
overflow: auto;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect .25s;
}
.space {
width: 4px;
height: auto;
display: inline-block;
}
.line {
background-color: black;
height: auto;
width: 5px;
}
p {
font-size: 14px;
font-family: "Arial", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Arial", sans-serif;
}
.body_foreground {
color: #000000;
}
.body_background {
background-color: #EEEEEE;
}
</style>
</head>
<body style="font-family: 'Helvetica, Arial, sans-serif';">
<div >
<div >
<button style="background-color: rgba(0, 0, 255, 0.33)" id="defaultOpen" onclick="openTab(event, 'About')">
About</button><button style="background-color: rgba(255, 10, 10, 0.75)" onclick="openTab(event, 'Failures')">
Failures
</button>
<div >
<button style="color: white; background-color: gray">
Output Sections
</button>
<div id="myDropdown" >
<p>
<button style="background-color: #daeaf6; width: 140px; max-width: 250px" onclick="openTab(event, 'summary_section')">
summary_section
</button>
</p>
<p>
<button style="background-color: rgba(255, 10, 10, 0.50); width: 140px; max-width: 250px" onclick="openTab(event, 'failures_section')">
failures_section
</button>
</p>
</div>
</div>
<button style="background-color: rgba(0, 0, 255, 0.33)" onclick="openTab(event, 'Full Output')">
Full Output
</button>
</div>
</div>
<div id="About" >
<p></p>
<hr />
<h5>Final Results:</h5>
<pre><b> 1 failed, 62 deselected in 0.96s
</b></pre>
<hr />
<h5>Test results generated:</h5>
<p>2022-09-04 03:11:47</p>
<h5>This report generated:</h5>
<p>2022-09-04 03:12:47</p>
<h5>pytest-tui version:</h5>
<p>1.3.2</p>
</div>
<div id="Failures" >
<button type="button" style="border: none; outline: none;">
demo-tests/test_0.py::test0_fail_1
</button>
<div >
<pre>
Test Fail 1!
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre>
</div>
</div>
<div id="summary_section" >
<pre>
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================
================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251 gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251 gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected
demo-tests/test_0.py::test0_fail_1 FAILED [100%]
============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
</pre>
</div>
<div id="failures_section" >
<pre>
===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
</pre>
</div>
<div id="Full Output" >
<pre>
================================================================ test session starts ================================================================
platform darwin -- Python 3.10.5, pytest-7.2.0.dev251 gd9d890ee1, pluggy-1.0.0 -- /Users/jwr003/coding/pytest-tui/venv/bin/python
cachedir: .pytest_cache
metadata: {'Python': '3.10.5', 'Platform': 'macOS-12.5.1-x86_64-i386-64bit', 'Packages': {'pytest': '7.2.0.dev251 gd9d890ee1', 'py': '1.11.0', 'pluggy': '1.0.0'}, 'Plugins': {'rerunfailures': '10.2', 'html': '3.1.1', 'clarity': '1.0.1', 'Faker': '13.15.1', 'metadata': '2.0.2', 'tui': '1.3.2'}, 'JAVA_HOME': '/Users/jwr003/Library/Java/JavaVirtualMachines/corretto-11.0.12/Contents/Home'}
rootdir: /Users/jwr003/coding/pytest-tui, configfile: pytest.ini
plugins: rerunfailures-10.2, html-3.1.1, clarity-1.0.1, Faker-13.15.1, metadata-2.0.2, tui-1.3.2
collecting ...
collected 63 items / 62 deselected / 1 selected
demo-tests/test_0.py::test0_fail_1 FAILED [100%]
===================================================================== FAILURES ======================================================================
___________________________________________________________________ test0_fail_1 ____________________________________________________________________
def test0_fail_1():
print("Test Fail 1!")
> assert 1 == 2
E assert 1 == 2
demo-tests/test_0.py:37: AssertionError
--------------------------------------------------------------- Captured stdout call ----------------------------------------------------------------
Test Fail 1!
============================================================== short test summary info ==============================================================
FAILED demo-tests/test_0.py::test0_fail_1 - assert 1 == 2
========================================================= 1 failed, 62 deselected in 0.96s ==========================================================
</pre>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i ) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i ) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className = " active";
}
</script>
<script>
document.getElementById("defaultOpen").click();
</script>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
<script>
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
</script>
</body>
</html>