mdc-content has no css styling

[jvnill]

Hi,

Just want to ask if I missed something. Attached is a screenshot of what my html markup looks like. You can see that there is no styling for mdc-content which makes the top part of mdc-content hide behind the top app bar.

Here is my emblem file

nav-header component

= mdc-top-app-bar
  = mdc-top-app-bar-row
    = mdc-top-app-bar-section
      = mdc-top-app-bar-title
        = pageTitle

    = mdc-top-app-bar-section position='alignEnd'
      = mdc-top-app-bar-action-item label='Panic' alt='Panic' icon='notification_important'
      = mdc-top-app-bar-action-item label='Help' alt='Help' icon='help'

      if session.isAuthenticated
        a{ action 'logout' }
          = mdc-top-app-bar-action-item label='Logout' alt='Logout' icon='close'

= yield

template that calls the nav-header component

= nav-header
  = mdc-content
    = outlet

[hilljh82]

@jvnill The default behavior for mdc-content is not include any adjustments, which is similar to what is present in material-components-web. This will cause your content to go behind the mdc-top-app-bar. This is necessary for some scenarios, such as a transparent mdc-top-app-bar overlaying an image. If you do not want the mdc-top-app-bar to overlay the content, then you need to add the style attribute on the mdc-top-app-bar. Please see the following link:

https://github.com/onehilltech/ember-cli-mdc/tree/master/packages/mdc-top-app-bar#usage

The style property must be one of the following values:

• fixed
• dense
• prominent
• short

The mdc-content component automatically detects its adjustment style based on the style present in the mdc-top-app-bar. This allows the mdc-content component to have dynamic styling. For example, if you change mdc-top-app-bar from fixed to prominent, then mdc-content will automatically updates its style from mdc-top-app-bar--fixed-adjust to .mdc-top-app-bar--prominent-fixed-adjust.

[jvnill]

AH that works! thank you!