Greetings! I am currently working on designing a webpage that consists of two parts: a left section with buttons and a right section with a table view. Everything looks perfect until I zoom in my browser to 150% or more, causing the content in the table to expand vertically. This results in the bottom of the two sections not aligning horizontally.
My main concern is how to ensure that the bottom of both sections always stay in the same line, even when zooming in. While some may suggest filling the background with white to hide this issue, I require keeping the border lines intact and aligned properly.
Below is a snippet of my current code which includes both HTML and CSS:
HTML File:
<div class="container-fluid vuln-content">
<div class="row">
<div class="col-2 filter-container">
<div id="filter-card">
<app-vuln-filter [currentSelectedTabIndex]="currentSelectedTabIndex"></app-vuln-filter>
</div>
</div>
<div class="col-10">
<p-tabView (onChange)="onClick($event)" styleClass="vuln-tabs">
<p-tabPanel *ngFor="let gridConfig of gridTabConfigs" id={{gridConfig.id}} header={{gridConfig.header}}>
<app-vul-ami-grid [gridConfig]="gridConfig"></app-vul-ami-grid>
</p-tabPanel>
</p-tabView>
</div>
</div>
</div>
The CSS styling for the webpage is as follows:
.vuln-content {
min-height: calc(100vh - 37px);
.filter-container {
margin: 10px 0 0;
background: #FFFFFF;
}
& > div.row {
margin: 0 0 0 -10px;
}
}
If you believe resolving this issue requires JavaScript, particularly within an Angular framework, I am open to exploring and learning new techniques. Your guidance on achieving a consistent alignment between the two sections would be greatly appreciated. Thank you!