I am facing an issue with my Angular component that opens another component as an offcanvas:
openTop() {
this.offcanvasService.open(AdvancedSearchComponent, {
position: 'top',
backdropClass: 'bg-dark',
panelClass: 'h-25 bg-danger text-bg-danger flex-column',
keyboard: true,
});
}
In the offcanvas component, I have the following structure:
<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
<div class="navbar-toggler border-0 ps-2 ps-sm-3 py-2 py-lg-0">
<a class="navbar-brand" href="#"
><img src="assets/..."
/></a>
</div>
<button
class="navbar-toggler mx-2 mb-2"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSearch"
aria-controls="navbarSearch"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse flex-grow-1" id="navbarSearch">
<form
class="overflow-auto flex-grow-1"
(ngSubmit)="searchTask()"
[formGroup]="searchForm"
>
<div class="offcanvas-header pe-0 pt-0 pb-1 align-items-start">
...
The relevant CSS for this issue is as follows:
:host {
height: 100%;
display: flex;
flex-direction: column;
}
form {
scrollbar-gutter: stable;
}
When I add overflow-auto to the <nav> element in the top offcanvas, its height becomes 25vh and a scroll bar appears when the content exceeds the vertical space.
However, if I add overflow-visible or no overflow class at all to the top <nav> element, the offcanvas panel expands beyond the screen when the content doesn't fit vertically. This causes issues when buttons within the panel trigger content growth without a scrollbar, due to the use of overflow-visible. My goal is to have overflow-visible when the offcanvas panel occupies 25%-100% of the viewport, but switch to overflow-auto when the content exceeds 100% of the viewport.
The desired outcome is for the top offcanvas panel to dynamically adjust to the content size, while enabling a scrollbar to view overflow when the content surpasses the screen boundaries.
Attempts made so far:
Some Stack Overflow suggestions point out that setting
body {overflow: hidden}might be causing the issue. Although removing this style from the body added a scrollbar, it only applies to the background content rather than the offcanvas content.Experimented with additional
<div>elements using different classes.Tried utilizing
max-heightandheightproperties in CSS, as well as applying corresponding Bootstrap classes to the<nav>element, but didn't achieve the desired result.Some solutions suggest implementing
padding, but I couldn't comprehend how to apply it effectively in this context.