In the left side container, I have a header and sub-header, while the right side container contains text. However, whenever I click on the sub-header to display text on the right side, both container positions shift upward, hiding the header text. I'm unsure of what is causing this issue, so any suggestions or help would be greatly appreciated.
HTML
<div class="container-inside-dialog">
<div class="row">
<h1 class="primary-text header">Help Documentations</h1>
<div class="column left">
<mat-nav-list>
<mat-expansion-panel class="exp-panel" *ngFor="let section of mappedSections">
<mat-expansion-panel-header style="align-items: center;">
<div>{{section.sectionName}}</div>
</mat-expansion-panel-header>
<div>
<a mat-list-item *ngFor="let subsection of section.subSections"
(click)="navigateToSubsection(section.id,subsection.id)">{{subsection.sectionName}}
</a>
</div>
</mat-expansion-panel>
</mat-nav-list>
</div>
<div class="column right">
<div *ngFor="let section of mappedSections">
<h1>{{section.sectionName}}</h1>
<div *ngFor="let subsection of section.subSections">
<h2>{{subsection.sectionName}}</h2>
<p id="s{{section.id}}ss{{subsection.id}}" class="multi_lines_text"
[innerHTML]="subsection.text"></p>
</div>
</div>
</div>
</div>
</div>
TS
navigateToSubsection(sectionId, subsectionId) {
document.querySelector(`#s${sectionId}ss${subsectionId}`).scrollIntoView({ behavior: 'smooth' })
}
CSS
.dialog-container {
width: 55vw;
height: 65vh;
overflow:hidden;
overflow-y: hidden !important;
padding: 2px;
margin: 0 20px;
}
.container-inside-dialog {
width: 100%;
height: 100%;
padding: 10px;
overflow:hidden;
overflow-y: hidden !important;
}
* {
box-sizing: border-box;
}
.column {
float: left;
padding: 10px;
}
.left {
width: 38%;
margin-top: 05px;
position: relative;
height: 530px;
overflow-y: auto;
}
.right {
position: relative;
width: 62%;
height: 530px;
overflow-y: auto;
}
.button{
width: 287px;
text-align: left;
padding-left: 25px;
height: 47px;
}
.edit-button{
top: -50px;
left: 230px;
}
/* Clear floats after the columns */
.row:after {
position: relative;
content: "";
display: table;
clear: both;
}
Displayed are images showing the layout before and after clicking the subsection. Any insights or observations from the code above would be highly appreciated. Thank you.