Skip to content

docs-bug(COMPONENT): Toolbar doesn't mention responsiveness or how it works with Sidenav #30829

Open
@Panossa

Description

@Panossa

Documentation Feedback

I've recently begun implementing a responsive design with Mat Toolbar and Mat Sidenav. One requirement I got was to have the mobile design trigger whenever the Small breakpoint is triggered (not just at XSmall). However, when using the fixedTopGap like in the example given in the docs (via Stackblitz), I found out that the Toolbar switches its height from 64px to 56px when on XSmall.

I'd like to add to the docs of the Toolbar at least some mention of the height-changing behavior. From what I can see, only the Toolbar (of all Angular Material components) has a behavior like this and is thus very different from what I was used to. The only mention of a separate mobile height is in the Styling part of the docs and it only mentions there is a value with that name and how to override it.

Additionally, I'd add something like the following to the docs of fixedTopGap in Sidenav:
"When used with Material Toolbar, the value set here should take into consideration the standard-height and mobile-height difference and when it's applied."

Affected documentation page

https://material.angular.io/components/toolbar/overview

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: material/sidenavdocsThis issue is related to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions