Description
Feature Description
The following is presented for your consideration and it related to #27974
I don't think the whole idea of changing the height of the MatToolbar on mobile and its implications has been totally thought through. In the past there was no really good way to change the styles in my application to accommodate this without knowing the media query that is used. I will present as an example your own code. This is the code from the last example on this page
Html
<div class="example-container" [class.example-is-mobile]="mobileQuery.matches" *ngIf="shouldRun">
<mat-toolbar color="primary" class="example-toolbar">
<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
<h1 class="example-app-name">Responsive App</h1>
</mat-toolbar>
<mat-sidenav-container class="example-sidenav-container"
[style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
[fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
<mat-nav-list>
<a mat-list-item routerLink="." *ngFor="let nav of fillerNav">{{nav}}</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<p *ngFor="let content of fillerContent">{{content}}</p>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
And css
.example-container {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.example-is-mobile .example-toolbar {
position: fixed;
/* Make sure the toolbar will stay on top of the content as it scrolls past. */
z-index: 2;
}
h1.example-app-name {
margin-left: 8px;
}
.example-sidenav-container {
/* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
flex: 1;
}
.example-is-mobile .example-sidenav-container {
/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
`<body>` to be our scrolling element for mobile layouts. */
flex: 1 0 auto;
}
The problem with this code is that on mobile the content in the sidenav container will be under the toolbar so a padding-top or a margin-top needs to be added. This forces me to know the breakpoint that the height of the toolbar changes and which variable to use.
Why can't you just expose one variable that tells me the height of the toolbar regardless of the screen size, something like --mat-toolbar-height? At the end of the day, as a developer that is all I care about. Regardless of what my determination of a 'mobile' screen is I should just have to add something like this:
.example-is-mobile .example-sidenav-container {
/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
`<body>` to be our scrolling element for mobile layouts. */
flex: 1 0 auto;
margin-top: var(--mat-toolbar-height);
}
instead of having to do something like this (this may be wrong but you get the point):
.example-is-mobile .example-sidenav-container {
/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
`<body>` to be our scrolling element for mobile layouts. */
flex: 1 0 auto;
margin-top: var(--mat-toolbar-standard-height);
}
@media {what ever the toolbar media query is} {
.example-is-mobile .example-sidenav-container {
margin-top: var(--mat-toolbar-mobile-height);
}
}
Use Case
No response