CODEWITHSUNDEEP
angularjsangular-material
akashihi
akashihi

Reputation: 957

angular-md md-grid-list hides under md-sidenav

I'm quite new in angular-md and trying to make obvious thing - sidenav with cards on the right. The code is not that hard http://codepen.io/anon/pen/qZPRmq

<body ng-app="BlankApp" ng-cloak layout="column">
<div flex layout="row">
    <md-sidenav md-is-locked-open="true" class="md-sidenav-left md-whiteframe-z2" layout="column">
      Some form here
    </md-sidenav>

    <!-- Container #4 -->
    <md-content flex layout="column" class="md-padding" layout-padding>
        <md-grid-list flex md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-cols-gt-md="6"
                      md-row-height="2:2"  md-gutter="12px" md-gutter-gt-sm="8px">
            <md-grid-tile flex>
                <md-card>
                    First card here
                </md-card>
                <md-card>
                  Second card here
                </md-card>
            </md-grid-tile>
        </md-grid-list>
    </md-content>
</div>

But the problem is that md-grid-tile runs away from the md-content block and get's overlapped by sidenav (and sometimes by md-toolbar). What i'm doing wrong? Problematic layout

Upvotes: 0

Views: 319

Answers (1)

WuDo
WuDo

Reputation: 195

Change

        <md-grid-tile flex>
            <md-card>
                First card here
            </md-card>
            <md-card>
              Second card here
            </md-card>
        </md-grid-tile>

to

        <md-grid-tile>
            <md-card>
                First card here
            </md-card>
        </md-grid-tile>
        <md-grid-tile>
            <md-card>
              Second card here
            </md-card>
        </md-grid-tile>

Upvotes: 1

Related Questions