give the two pages of the functions tab individual scrollbars

This commit is contained in:
Joe Adams
2024-06-22 20:34:20 -05:00
committed by Peter Ammon
parent e03e5e116d
commit 2ad4454e52
2 changed files with 18 additions and 13 deletions

View File

@@ -53,6 +53,9 @@ body {
background-color: #DDE; background-color: #DDE;
} }
#tab_parent{
border: red 1px;
}
#tab_parent :first-child { #tab_parent :first-child {
border-top-left-radius: 8px; border-top-left-radius: 8px;
border-left: none; border-left: none;
@@ -91,25 +94,25 @@ body {
height: 30px; height: 30px;
} }
.master_detail_table { .function_tab {
display: table;
margin-top: 10px;
margin-left: 12px; margin-left: 12px;
margin-right: 12px; margin-right: 12px;
display: flex;
flex-direction: row;
height: 90vh;
overflow: hidden;
} }
.master { .function-list {
display: table-cell;
text-align: right; text-align: right;
min-width: 200px; min-width: 250px;
font-size: 16pt; font-size: 16pt;
padding-bottom: 20px;
padding-top: 35px;
vertical-align: top; vertical-align: top;
overflow-y: auto;
height: 100%;
} }
.detail { .function-body {
display: table-cell;
border: 1px solid #555; border: 1px solid #555;
background-color: #ffffff; background-color: #ffffff;
padding-top: 30px; padding-top: 30px;
@@ -118,6 +121,8 @@ body {
padding-right: 30px; padding-right: 30px;
border-radius: 5; border-radius: 5;
width: 100%; width: 100%;
height: 100%;
overflow-y: auto;
} }
.detail_function pre { .detail_function pre {

View File

@@ -237,8 +237,8 @@
</template> </template>
<template x-if="currentTab === 'functions'" x-data="functions"> <template x-if="currentTab === 'functions'" x-data="functions">
<div class="master_detail_table"> <div class="function_tab">
<div class="master"> <div class="function-list">
<template x-for="func in functions"> <template x-for="func in functions">
<!-- TODO use ul/li --> <!-- TODO use ul/li -->
<div> <div>
@@ -250,7 +250,7 @@
</div> </div>
</template> </template>
</div> </div>
<div class="detail"> <div class="function-body">
<div class="detail_function" x-html="functionDefinition"></div> <div class="detail_function" x-html="functionDefinition"></div>
</div> </div>
</div> </div>