Material: md-content to take 100% of the available vertical height

[prasannapattam]

It would be a nice feature if md-content takes 100% of the available vertical space. Currently I am using the current offset and height of the window for setting the height of the md-content.

[plato-cambrian]

Can you use layout-fill on the parent, then flex on the md-content?

On Thu, Nov 27, 2014 at 10:03 AM, Prasanna Pattam [email protected]
wrote:

It would be a nice feature if md-content takes 100% of the available
vertical space. Currently I am using the current offset and height of the
window for setting the height of the md-content.

—
Reply to this email directly or view it on GitHub
https://github.com/angular/material/issues/782.

[prasannapattam]

In my scenario, the data in the md-content is more than screen height. I want the scroll bar to be shown for the md-content. Based on the available height, I want the md-content to stretch and then have a scrollbar,

[sondreb]

This should do it for you:

<div flex layout="row">
 <md-content flex></md-content>
</div>

[ThomasBurleson]

Perhaps the latest Layout API will also help.

[brutto]

@sondreb you save my day! Thanks alot

Maybe this solution must be in docs like typical workarounds?

[pmdusso]

Hi, the solution from @sondreb did not worked for me. I have the following scenario:

<div style="height:100%">

    <md-button id="mdAdd" class="md-fab md-raised md-primary" ng-click="showDialog($event)">
        <md-icon icon="bower_components/material-design-icons/content/svg/production/ic_add_24px.svg"
                 style="width: 24px; height: 24px; fill:white"></md-icon>
    </md-button>

    <div layout="row" layout-align="space-between center">
        <!-- Left column, with the farm tile and card list -->
        <div flex>
            <!-- Title and Search box -->
            <div flex layout="row" layout-align="space-between center">
                ...
            </div>

            <div layout="row" flex>
                <md-content style="height: 100%; background-color: #ececec" flex>
                    <div layout="row" layout-align="space-between center top">
                        <!-- cards -->
                        <md-list ... >
                        <div flex="5"/>
                    </div>
                </md-content>
            </div>
        </div>
        <!-- Right column, with the map -->
        <div flex="50">
            <!-- MAP -->
            <ui-gmap-google-map center='mapOptions.center' zoom='mapOptions.zoom' options='mapOptions.options'
                                control="mapControl" flex="50">
            </ui-gmap-google-map>
        </div>
    </div>
</div>

This markup results in the following screen, with the md-content expanding to fit all cards:

However, I would like it to be limited by the size of the screen as in this picture (where I defined the height in pixels to take the picture):

Where can I work on?

[JalalAlbasri]

@sondreb 's solution only works for me if I removed the fixed height I had set on md-content. Problem is when I remove that md-content does not scroll.

[pmdusso]

We further discusse this topic (and found some solutions) in the google group: https://groups.google.com/forum/#!topic/ngmaterial/FzyZXYdcPBk

[yarsh]

See a (somewhat hacky) solution for full-height md-tabs here: http://stackoverflow.com/questions/30314441/angularjs-material-tab-height-issue/37856853#37856853

[wingoku]

@pmdusso How did you resolve the mentioned problem?

[sukhveersingh]

.example-container {
    position: absolute;
    min-height: 100% !important;
}

add this class to <md-sidenav-container> will resolve the issue

[moleisking]

.app-component-filler {  
  min-height: 100vh
}

[leiradk]

try this guys

.divclass {
  height: inherit;
  min-height: 275px;
  max-height: 600px;
}