fix(igx-templates): fix side-nav layout stacking and scrolling issues#1702
fix(igx-templates): fix side-nav layout stacking and scrolling issues#1702ivanvpetrov wants to merge 3 commits into
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the Angular side-nav and side-nav-auth app shell templates to ensure the generated layout renders the nav drawer and main content side-by-side and keeps the drawer stationary while only the routed content area scrolls.
Changes:
- Adds explicit flex row layout and overflow containment styles to the
side-navapp shell. - Adds a
.mainhook inside-navmarkup to correctly apply the new layout constraints. - Adds the missing
app.scssto theside-nav-authtemplate with matching layout/scroll rules.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.scss | Adds overflow containment + explicit flex-row wrapper and .main constraints for correct scrolling/layout. |
| packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html | Adds class="main" to allow the new .main sizing/overflow rules to apply. |
| packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.scss | Introduces the missing stylesheet and applies the same app shell layout/scroll rules. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| app-root { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .outer-wrapper { | ||
| height: 100%; | ||
| overflow: hidden; | ||
| display: flex; | ||
| flex-direction: row; |
| app-root { | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .outer-wrapper { | ||
| height: 100%; | ||
| overflow: hidden; | ||
| display: flex; | ||
| flex-direction: row; | ||
| } |
|
coverage: 87.455%. remained the same — ipetrov/fix-1615-nav-drawer-layout into master |
| <div class="outer-wrapper" igxLayout> | ||
| <igx-nav-drawer #nav id="project-menu" [isOpen]="true" [enableGestures]="true" width="280px"> | ||
| <ng-template igxDrawer> | ||
| <span igxDrawerItem [isHeader]="true">Views</span> | ||
| @for (route of topNavLinks; track route) { | ||
| <span igxDrawerItem igxRipple routerLinkActive="igx-nav-drawer__item--active" [routerLink]="route.path">{{route.name}}</span> | ||
| } | ||
| </ng-template> | ||
| </igx-nav-drawer> | ||
| <div igxFlex igxLayout igxLayoutDir="columns"> | ||
| <div class="main" igxFlex igxLayout igxLayoutDir="columns"> |
There was a problem hiding this comment.
@ivanvpetrov Can you check the directives are actually active?
igxLayout on the .outer-wrapper is supposed to place it in display: flex; IIRC.
Simlartly with igxFlex on the .main. I'm assuming it's just the imports are missing?
Might want to check out https://www.infragistics.com/products/ignite-ui-angular/angular/components/layout to see what those directives added, recreate that in CSS as a starting point and actually remove the directives if they won't be used anymore.
There was a problem hiding this comment.
Also not sure what scrolling issues there are, but you shouldn't have to spam that much overflow: hidden; (if at all) in a cleanly set up layout.
Closes #1615
Description
Fixes the Angular
side-navandside-nav-authgenerated app shell layout where:Root Cause
The
.outer-wrappercontainer relied solely on theigxLayoutdirective fordisplay: flex, but had no explicitoverflow: hiddento constrain the flex container to its height. Becausehtml/bodyalready haveheight: 100%butoverflow: visible, page-level scrolling was triggered for tall content — causing the nav drawer to scroll away with the page instead of staying fixed.Additionally,
side-nav-authwas missing itsapp.scssfile entirely, even thoughapp.tsreferenced it viastyleUrl: './app.scss'.Changes
side-nav/files/src/app/app.scss: Addeddisplay: flex; flex-direction: rowto.outer-wrapper, addedoverflow: hiddentoapp-root,.outer-wrapper, and.main, and added.mainrule withflex: 1; min-width: 0; min-height: 0side-nav/files/src/app/app.html: Addedclass="main"to the inner content<div>so it can be targeted by the.mainCSS ruleside-nav-auth/files/src/app/app.scss: Created the missing stylesheet with the same layout rules (theside-nav-authtemplate already hadclass="main"on the inner div)Result
The nav drawer and navbar are now stationary. Only the routed page content area scrolls via
overflow: autoon.content.Preview before fix
Screen.Recording.2026-05-21.100741.mp4
Preview after fix
Screen.Recording.2026-05-21.100853.mp4