I am currently working on a page that utilizes angular-split. Here is a snippet of the code:
<div class="height-max">
<app-nav-menu></app-nav-menu>
<as-split direction="horizontal">
<as-split-area>
<router-outlet></router-outlet>
</as-split-area>
<as-split-area *ngIf="(contentSplitVisible | async)">
<app-content></app-content>
</as-split-area>
<as-split-area *ngIf="(propertiesSplitVisible | async)">
<app-properties></app-properties>
</as-split-area>
</as-split>
</div>
Additionally, the associated CSS code includes this:
.height-max
{
height: 100%;
}
In order to make the split gutters visible (you can check this here), I implemented the following change:
.height-max
{
height: 100%;
overflow: hidden;
}
However, this adjustment brings about its own set of issues:
- Some content may become unreachable
- The gutter handle is not vertically centered
Unfortunately, I encountered a roadblock when attempting to apply the 'height-max' class to a specific div that wraps only 'as-split'. This method did not work as expected:
<div>
<app-nav-menu></app-nav-menu>
<div class="height-max">
<as-split direction="horizontal">
<as-split-area>
<router-outlet></router-outlet>
...
Could someone please advise on the correct approach to resolve this issue?