Layout - Troubleshooting

Overview

The Angular Material Layout system uses the current Flexbox feature set. More importantly, it also adds syntactic sugar to allow developers to easily and quickly add Responsive features to HTML containers and elements.

As you use the Layout features, you may encounter scenarios where the layouts do not render as expected; especially with IE 10 and 11 browsers. There may also be cases where you need to add custom HTML, CSS and Javascript to achieve your desired results.


Resources

If you are experiencing an issue in a particular browser, we highly recommend using the following resources for known issues and workarounds.


General Tips

Below, you will find solutions to some of the more common scenarios and problems that may arise when using Material's Layout system. The following sections offer general guidelines and tips when using the flex and layout directives within your own applications.

  • When building your application's Layout, it is usually best to start with a mobile version that looks and works correctly, and then apply styling for larger devices using the flex-gt-* or hide-gt-* attributes. This approach typically leads to less frustration than starting big and attempting to fix issues on smaller devices.
  • Some elements like <fieldset> and <button> do not always work correctly with flex. Additionally, some of the Angular Material components provide their own styles. If you are having difficulty with a specific element/component, but not others, try applying the flex attributes to a parent or child <div> of the element instead.
  • Some Flexbox properties such as flex-direction cannot be animated.
  • Flexbox can behave differently on different browsers. You should test as many as possible on a regular basis so that you can catch and fix layout issues more quickly.

Layout Column

In some scenarios layout="column" and breakpoints (xs, gt-xs, xs, gt-sm, etc.) may not work as expected due to CSS specificity rules.

This is easily fixed simply by inverting the layout logic so that the default is layout='row'. To see how the layout changes, shrink the browser window its width is <600px;


IE11 - Layout Column, 0px Height

In Internet Explorer 11, when you have a column layout with unspecified height and flex items inside, the browser can get confused and incorrectly calculate the height of each item (and thus the container) as 0px, making the items overlap and not take up the proper amount of space.

Note: The flex items below actually do have some height. This is because our doc-specific CSS provides a small bit of padding (8px). We felt that the extra padding made for a better demo of the actual issue.

IE11 - Layout Column, 0px Height
11111
11111
11111
22222
22222
22222
33333
33333
33333

Unfortunately, there is no IE11 specific fix available, and the suggested workaround is to set the flex-basis property to auto instead of 0px (which is the default setting).

You can easily achieve this using the flex="auto" attribute that the Layout system provides.

IE11 - Layout Column, 0px Height (Fix 1)
11111
11111
11111
22222
22222
22222
33333
33333
33333

Alternatively, you can manually set the height of the layout container (400px in the demo below).

IE11 - Layout Column, 0px Height (Fix 2)
11111
11111
11111
22222
22222
22222
33333
33333
33333

Flex Element Heights

Firefox currently has an issue calculating the proper height of flex containers whose children are flex, but have more content than can properly fit within the container.

This is particularly problematic if the flex children are md-content components as it will prevent the content from scrolling correctly, instead scrolling the entire body.

Notice in the above Codepen how we must set overflow: auto on the div with the change-my-css class in order for Firefox to properly calculate the height and shrink to the available space.