angularjsmaterial-designangular-materialangular-grid

Material Design Grid Widths not aligning up


Fiddle: http://jsfiddle.net/hectooorr/dcwt3to2/

I have 2 problems. Unable to align 2 containers next to each other. Unable to get a consistent width.

First problem: How can I get 2 containers to align up next to each other when they are both 50% in width? In my scenario below I'll always have two containers each with a 50% width. When I do that my containers don't align up. Should be adding those 2 in their own row and adding 50% to one and flex to the other?

<div layout="row" layout-margin layout-fill layout-wrap class="custom-chart-list">
<div flex="100" class="custom-container">container 1: 100% width - why does this width exceed width of containers 2 and 3?</div>
<div flex="50">container 2: 50% width</div>
<div flex="50">container 3: 50% width</div>
<div flex="100" class="custom-container">100% width</div>
<div flex="50">container 4: 50% width</div>
<div flex="50">container 5: 50% width - Why won't this stack next to container 4?</div>

Second problem: Why does a container of flex="100" exceed the width of 2 containers each with 50%? See example below. The first row has a flex of 100. The 2nd container has a flex of 50 and the third one has just the 'flex' attribute.

enter image description here


Solution

  • Here's my fix http://jsfiddle.net/hectooorr/etmpLnkv/

    <md-content flex class="custom-main-content" md-scroll-y role="main">
    <div layout="row" layout-align="space-around center" layout-wrap class="custom-flex-grid">
        <div flex="100" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                     <h3>Title</h3>
    
                </div>
                <div class="custom-content">test</div>
                <div class="custom-footer">test</div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                     <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                  <h3>Title</h3>
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                     <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                     <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="100" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                    <div layout="row" layout-fill>
                        <div flex>
                             <h3>Title</h3>
    
                        </div>
                        <div flex="30">legend</div>
                        <div flex="30" flex-gt-lg="10">
                            <select class="form-control input-sm">
                                <option>Hours</option>
                                <option>Option 2</option>
                                <option>Option 3</option>
                                <option>Option 4</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                    <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                    <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                     <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
        <div flex="50" class="custom-flex-grid-tile">
            <div class="custom-flex-grid-tile-inner">
                <div class="custom-header">
                    <h3>Title</h3>
    
                </div>
                <div class="custom-content">chart</div>
                <div class="custom-footer"></div>
            </div>
        </div>
    </div>