html - How do I adjust the grid gutter on MDL as that of foundation or bootstrap? -


how set gutter width of material design lite's grid system,

with mdl, basic grid.

<div class="demo-grid-ruler mdl-grid container">   <div class="mdl-cell mdl-cell--1-col fl-10">1</div>   <div class="mdl-cell mdl-cell--1-col fl-11">2</div>   <div class="mdl-cell mdl-cell--1-col fl-12">3</div>   <div class="mdl-cell mdl-cell--1-col fl-13">4</div>   <div class="mdl-cell mdl-cell--1-col fl-14">5</div>   <div class="mdl-cell mdl-cell--1-col fl-15">6</div>   <div class="mdl-cell mdl-cell--1-col fl-16">7</div>   <div class="mdl-cell mdl-cell--1-col fl-17">8</div>   <div class="mdl-cell mdl-cell--1-col fl-18">9</div>   <div class="mdl-cell mdl-cell--1-col fl-19">10</div>   <div class="mdl-cell mdl-cell--1-col fl-20">11</div>   <div class="mdl-cell mdl-cell--1-col fl-9">12</div> </div> 

enter image description here screenshot of mdl vs foundation,

how fix gutter width zero?

have setup fiddle,

update:

after digging documentation, there exists class

mdl-cell--stretch

stretches cell vertically fill parent

enter image description here

that changes grid way, still not okay!

have opened issue on mdl's github, , got know that

adding class, mdl-grid--no-spacing mdl-grid fixes issue. skipped documentation somehow.

<div class="demo-grid-ruler mdl-grid container mdl-grid--no-spacing">   <div class="mdl-cell--stretch mdl-cell--1-col fl-10">1</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-11">2</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-12">3</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-13">4</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-14">5</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-15">6</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-16">7</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-17">8</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-18">9</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-19">10</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-20">11</div>   <div class="mdl-cell--stretch mdl-cell--1-col fl-9">12</div> </div> 

updated fiddle


Comments

Popular posts from this blog

Fail to load namespace Spring Security http://www.springframework.org/security/tags -

sql - MySQL query optimization using coalesce -

unity3d - Unity local avoidance in user created world -