angular-material-npfixed
Version:
The Angular Material project is an implementation of Material Design in Angular.js. This project provides a set of reusable, well-tested, and accessible Material Design UI components. Angular Material is supported internally at Google by the Angular.js, M
229 lines (181 loc) • 8.2 kB
HTML
<style>
ul.spaced li {
margin-bottom: 15px;
}
</style>
<div ng-controller="LayoutTipsCtrl as tips" class="layout-content">
<h3>Overview</h3>
<p>
The Angular Material Layout system uses the current
<a href="http://www.w3.org/TR/css3-flexbox/">Flexbox</a> feature set. More importantly, it also
adds syntactic sugar to allow developers to easily and quickly add Responsive features to HTML
containers and elements.
</p>
<p>
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.
</p>
<br/>
<hr/>
<h3>Resources</h3>
<p>
If you are experiencing an issue in a particular browser, we highly recommend using the
following resources for known issues and workarounds.
</p>
<ul>
<li><a href="https://github.com/philipwalton/flexbugs#flexbugs" target="_blank">FlexBugs</a></li>
<li><a href="https://philipwalton.github.io/solved-by-flexbox/" target="_blank">Solved by FlexBugs</a></li>
<li><a href="http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/" target="_blank">Normalizing Cross-browser Flexbox Bugs</a></li>
<li style="margin-bottom: 20px;"><a href="http://caniuse.com/#search=flex" target="_blank">Can I use flexbox...? ( see the <code>Known Issues</code> tab)</a></li>
<li><a href="https://groups.google.com/forum/#!forum/ngmaterial">Angular Material Forum</a></li>
<li style="margin-top: 20px;"><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a></li>
<li style="margin-bottom: 20px;"><a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties" target="_blank">A Visual Guide to CSS3 Flexbox Properties</a></li>
</ul>
<br/>
<hr/>
<h3>General Tips</h3>
<p>
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 <code>flex</code> and
<code>layout</code> directives within your own applications.
</p>
<ul class="spaced">
<li>
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
<code>flex-gt-*</code> or <code>hide-gt-*</code> attributes. This approach typically leads
to less frustration than starting big and attempting to fix issues on smaller devices.
</li>
<li>
Some elements like <code><fieldset></code> and <code><button></code> 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 <code><div></code> of the
element instead.
</li>
<li>
Some Flexbox properties such as <code>flex-direction</code> <u>cannot</u> be animated.
</li>
<li>
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.
</li>
</ul>
<br/>
<hr/>
<h3>Layout Column</h3>
<p>
In some scenarios <code>layout="column"</code> and breakpoints (xs, gt-xs, xs, gt-sm, etc.) may not work
as expected due to CSS specificity rules.
</p>
<div class="md-whiteframe-3dp">
<iframe height='700' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/obgapg/?height=700&theme-id=21180&default-tab=result'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a
href='http://codepen.io/team/AngularMaterial/pen/obgapg/'>Card Layouts (corrected)</a> by Angular Material (<a
href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a href='http://codepen.io'>CodePen</a>.
</iframe>
</div>
<p>
This is easily fixed simply by inverting the layout logic so that the default is <code>layout='row'</code>.
To see how the layout changes, shrink the browser window its width is <600px;
</p>
<br/>
<hr/>
<h3 id="layout-column-0px-ie11">IE11 - Layout Column, 0px Height</h3>
<p>
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 <code>0px</code>, making the items overlap and not take up the proper amount
of space.
</p>
<p class="layout_note">
<b>Note:</b> The flex items below actually do have some height. This is because our doc-specific
CSS provides a small bit of padding (<code>8px</code>). We felt that the extra padding made for
a better demo of the actual issue.
</p>
<docs-demo demo-title="IE11 - Layout Column, 0px Height" class="colorNested">
<demo-file name="index.html">
<div flex layout="column">
<div flex>
11111<br />11111<br />11111
</div>
<div flex>
22222<br />22222<br />22222
</div>
<div flex>
33333<br />33333<br />33333
</div>
</div>
</demo-file>
</docs-demo>
<p>
Unfortunately, there is no IE11 specific fix available, and the suggested workaround is to set
the <code>flex-basis</code> property to <code>auto</code> instead of <code>0px</code> (which is
the default setting).
</p>
<p>
You can easily achieve this using the <code>flex="auto"</code> attribute that the Layout system
provides.
</p>
<docs-demo demo-title="IE11 - Layout Column, 0px Height (Fix 1)" class="colorNested">
<demo-file name="index.html">
<div flex layout="column">
<div flex="auto">
11111<br />11111<br />11111
</div>
<div flex="auto">
22222<br />22222<br />22222
</div>
<div flex="auto">
33333<br />33333<br />33333
</div>
</div>
</demo-file>
</docs-demo>
<p>
Alternatively, you can manually set the height of the layout container (<code>400px</code>
in the demo below).
</p>
<docs-demo demo-title="IE11 - Layout Column, 0px Height (Fix 2)" class="colorNested">
<demo-file name="index.html">
<div flex layout="column" style="height: 400px;">
<div flex>
11111<br />11111<br />11111
</div>
<div flex>
22222<br />22222<br />22222
</div>
<div flex>
33333<br />33333<br />33333
</div>
</div>
</demo-file>
</docs-demo>
<br/>
<hr/>
<h3>Flex Element Heights</h3>
<p>
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.
</p>
<p>
This is particularly problematic if the <code>flex</code> children are <code>md-content</code> components as
it will prevent the content from scrolling correctly, instead scrolling the entire body.
</p>
<div class="md-whiteframe-3dp">
<iframe height='376' scrolling='no'
src='//codepen.io/team/AngularMaterial/embed/NxKBwW/?height=376&theme-id=0&default-tab=result'
frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
See the Pen <a href='http://codepen.io/team/AngularMaterial/pen/NxKBwW/'>Angular Material Basic App</a>
by Angular Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>)
on <a href='http://codepen.io'>CodePen</a>.
</iframe>
</div>
<p>
Notice in the above Codepen how we must set <code>overflow: auto</code> on the div with the
<code>change-my-css</code> class in order for Firefox to properly calculate the height and
shrink to the available space.
</p>
</div>