<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

I have the above section of HTML, and I'm trying to use Angular Material's flexbox support to create a page that has a background image that is the full page. Overlayed on this image is some text and a button that is in the center of the image.

If I inspect the outermost div in chrome it's size is (as expected) the full screen. The image div for some reason does not do this. It only takes up enough space to contain the text and button. Any insights on why this is happening would be appreciated. I know that this can be done in several different ways using various css tricks but I would like to learn what im missing about how flex works.

Update
Link to JSFiddle

<!-- Container Div -->
<div layout-fill>
    <!-- Image Div -->
    <div layout="column" layout-align="center center" class="coverImage" layout-fill>
        <md-content class="md-padding">
            Sample Text Here
        </md-content>
        <md-button class="md-raised md-primary">Sign Up</md-button>
    </div>
</div>

I have the above section of HTML, and I'm trying to use Angular Material's flexbox support to create a page that has a background image that is the full page. Overlayed on this image is some text and a button that is in the center of the image.

If I inspect the outermost div in chrome it's size is (as expected) the full screen. The image div for some reason does not do this. It only takes up enough space to contain the text and button. Any insights on why this is happening would be appreciated. I know that this can be done in several different ways using various css tricks but I would like to learn what im missing about how flex works.

Update
Link to JSFiddle

• javascript
• css
• angularjs
• flexbox
• material-design

• make a fiddle for this. – nitin Commented Mar 12, 2015 at 7:46
• I think I set this up correctly.... link – mtaliaf Commented Mar 12, 2015 at 16:58
• Here is yr new fiddle: jsfiddle/1tap45pp/9 – nitin Commented Mar 14, 2015 at 19:56
• 1 If you like the answer that currently has 6 upvotes. You might want to accept it. By doing so you're awarding his effort. Here's how and why: stackoverflow./help/someone-answers – Christiaan Westerbeek Commented Aug 1, 2017 at 7:49

3 Answers 3

I guess the fundamental issue es from using both layout-align and layout-fill in the same parent container.

Solutions

In short, there are 2 ways to overe this:

1. Add a custom css rule on parent container with align-items: stretch;

2. Use only layout-fill (no layout-align on the parent container)

Reasons

Whenever using layout-* directive, angular-material would add a class to the element, and apply flex layout related styles there. For example:

<div class="parent" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1" flex>
  <div class="child child-2" flex="none">
</div>

Will be piled to :

<div class="parent layout-fill layout-align-space-between-center layout-row" layout="row" layout-align="space-between center" layout-fill> 
  <div class="child child-1 flex" flex>
  <div class="child child-2 flex-none" flex="none">
</div>

And the resulting css would be:

.layout {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

.layout-row {
    flex-direction: row;
}

.layout-align-space-between-center {
    align-items: center;
    align-content: center;
    max-width: 100%;
    justify-content: space-between;
}

.layout-fill {
    margin: 0;
    width: 100%;
    min-height: 100%;
    height: 100%;
}

As you can see here, layout-fill does not change anything in flex related-rules at all.

What we expect for a stretched flex item should leverage on align-items: stretch as mentioned in this A Complete Guide to Flexbox by CSS-tricks. But this simply is not the case for angular material implementation. And it make sense because align-item rule is already being used in layout-align-* as a way to position the item.

Examples

Check this codepen example to see how it works.

<div layout-fill>
<img src="" class="bg" alt="image you want in background"></img>
<div layout="column" layout-align="center center">
    <md-content class="md-padding">
        Sample Text Here
    </md-content>
    <md-button class="md-raised md-primary">Sign Up</md-button>
</div>
</div>

and add this to yr CSS

  img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

A bit late