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

Popular posts from this blog

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

python Tkinter Capturing keyboard events save as one single string -

sql server - Why does Linq-to-SQL add unnecessary COUNT()? -