0

First of all a picture:

enter image description here

This is a screen from getmdl.io. I can not understand this behavior. I've sad, that i want exactly 3 column in a row with width of each one equals to 1/3 of row width. But in some screen resolutions width of column equals to half of row width. This comes from css instructions based on media queries and seems it's by design.

So my question is, can i prevent this behavior? If not, what is the reason of that behavior.

P.S. I have come from bootstrap and i didn't have this issue with it.

user3272018
  • 2,309
  • 5
  • 26
  • 48

2 Answers2

1

There's no way to achieve what you described out of the box way, if you insist on having 3 columns in mobile you must override the class as suggested by @JyotiPathania.

Remember Material Design Lite grid system is totally different from Bootstrap. Bootstrap has a fixed 12 columns and scaled down for all viewports. In contrast, Material Design Lite has 12 for desktop, 8 for tablets and 4 for mobile. As such, a .mdl-cell--4-col will take 1/3 of the screen on desktop, 1/2 of tablet and whole screen for mobile.

My suggestion is to avoid thinking in Bootstrap and overriding default MDL class, try to embrace the framework design decision. Otherwise, you'll be better off using a custom Bootstrap MDL theme.

nqngo
  • 528
  • 3
  • 10
0

Yes you can prevent this issue by overriding the mdl styles just add a custom class "custom-width":

HTML:

<div class="mdl-grid">
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
  <div class="mdl-cell mdl-cell--4-col custom-width">4</div>
</div>

CSS:

.custom-width {
    width: calc(33.3333% - 16px) !important;
}

and answer to your second question is because of mdl behave according to current viewport size:

Desktop:

.mdl-cell--4-col, .mdl-cell--4-col-desktop.mdl-cell--4-col-desktop {
    width: calc(33.3333% - 16px);
}

Tablet:

.mdl-cell--4-col, .mdl-cell--4-col-tablet.mdl-cell--4-col-tablet {
    width: calc(50% - 16px);
}

Mobile:

.mdl-cell--4-col, .mdl-cell--4-col-mobile.mdl-cell--4-col-mobile {
    width: calc(100% - 16px);
}

Hope this might help you. For more info read documentation mdl grid

Jyoti Pathania
  • 4,944
  • 1
  • 17
  • 29
  • It's clear for me. But it makes {4} useless, because in fact {4} turns to {6} or something else and i can not prevent it without a hack. Yes, `!important` is a dirty hack and it's the bad way to get functionaly i want. – user3272018 Aug 21 '16 at 07:17