md-grid-list inside md-grid-tile in Angular Material2 is not visible -
i have code given below in angular material 2
<md-grid-list cols="2" rowheight="2:1"> <md-grid-tile>1 <div> <md-grid-list cols="4" rowheight="1:1"> <md-grid-tile colspan="2">5</md-grid-tile> <md-grid-tile >6</md-grid-tile> <md-grid-tile>7</md-grid-tile> <md-grid-tile >8</md-grid-tile> <md-grid-tile >9</md-grid-tile> </md-grid-list> </div> </md-grid-tile> <md-grid-tile >2</md-grid-tile> <md-grid-tile>3</md-grid-tile> <md-grid-tile>4</md-grid-tile> </md-grid-list>
now ** div** tag , md-grid-list not visible inside it.
updated- solution same
<md-grid-list cols="2" rowheight="2:1"> <md-grid-tile class="shape">1 <div class="shape1"> <md-grid-list cols="2" rowheight="1:1"> <md-grid-tile >5</md-grid-tile> <md-grid-tile >6</md-grid-tile> <md-grid-tile>7</md-grid-tile> <md-grid-tile >6</md-grid-tile> </md-grid-list> </div> </md-grid-tile> <md-grid-tile class="shape">2</md-grid-tile> <md-grid-tile class="shape">3</md-grid-tile> <md-grid-tile class="shape">4</md-grid-tile> </md-grid-list>
where css given below.
.shape{ background:#ffd600; } .shape1{ background:#651fff; width: 50%; }
that's because div collapsed. try this:
<md-grid-list cols="2" rowheight="2:1"> <md-grid-tile> <div style="height: 100%; width: 100%; background-color: red;"> <md-grid-list cols="2" rowheight="2:1"> <md-grid-tile>6</md-grid-tile> <md-grid-tile>7</md-grid-tile> <md-grid-tile>8</md-grid-tile> <md-grid-tile>9</md-grid-tile> </md-grid-list> </div> </md-grid-tile> <md-grid-tile >2</md-grid-tile> <md-grid-tile>3</md-grid-tile> <md-grid-tile>4</md-grid-tile> </md-grid-list>
working plunkr here
Comments
Post a Comment