Vue-material: [SCSS] md-flex-small bug

Created on 6 May 2017 · 15Comments · Source: vuematerial/vue-material

Steps to reproduce

open layout demo page : https://vuematerial.github.io/#/ui-elements/layout

Which browser?

vue-material 0.7.1, Windows 10, Chrome Browser

What is expected?

On Responsive Demo, it must show different layout from md-flex-small and md-flex-medium.

What is actually happening?

there is no different layout between md-flex-small and md-flex-medium.

bug

Source

primadi

👍10

Most helpful comment

I was going to open an issue on this, but found this one, so I'll add to it instead.
It looks to me like the class definitions for @media break-points are in the generated CSS file in the wrong order.
For example, in my markup I have the following (using Pug):
```
md-layout(
md-flex-small="100"
md-flex-medium="50"
md-flex="33"
)

The resulting markup looks like this:

md-flex-medium-take precedence over themd-flex-small-` definitions. A screen capture shows the problem:
designer

After some testing, it appears to me that this is a problem with all the md-flex break-points. Only the "largest" break-point size take effect in addition to the non-size specified md-flex. So, if you have large, medium, small, and xsmall all specified, only the large will take affect.
Pretty sure they will have to be defined from xsmall through xlarge in ascending order.

bitencode on 13 Jun 2017

👍2

All 15 comments

There's no fix yet? The responsiveness seems to be not working =/

herlon214 on 25 May 2017

Thanks for reporting this issue @primadi ! :D
We'll look into it asap

What do you mean @herlon214 ?

pablohpsilva on 30 May 2017

👍1

The resulting markup looks like this:

md-flex-medium-take precedence over themd-flex-small-` definitions. A screen capture shows the problem:
designer

bitencode on 13 Jun 2017

👍2

I did some more testing, and of course, I'm partially wrong in the last comment. small is the only one that doesn't work right - it always is in the CSS at the end so never takes affect. The others all work properly, so if you user large, medium, xsmall it will have all the break-points set properly.

bitencode on 13 Jun 2017

👍1

Hi -- I'm experiencing the same issue. Currently md-flex-small does not take effect on any component. The rest of the breakpoints seem to work great. If anybody has any workarounds that would be fantastic!

juanfabrega on 15 Jun 2017

@juanfabrega just for workaround issue, you can use css :

$small-size:600px;

.small-visible {
  @media (min-width: $small-size+1) {
    display: none;
  }
}

.small-hide {
  @media (max-width: $small-size) {
    display: none;
  }
}

primadi on 15 Jun 2017

Hi @primadi, thanks so much for your help here!

I'm not sure I fully understood your suggestion. Any chance you could walk me through what these blocks are accomplishing? Also, are you suggesting I place these within the scoped style of my component? Thanks again!

juanfabrega on 16 Jun 2017

also this seems to be a duplicate of #546

capttrousers on 18 Jun 2017

Same problem.

<md-layout md-gutter>
  <md-layout md-flex-xsmall="50">Test</md-layout>
  <md-layout md-flex-xsmall="25">Test</md-layout>
  <md-layout md-flex-xsmall="25">Test</md-layout>
</md-layout>

This shows as three same width columns (doesn't work for small and xsmall).

jan-swiecki on 11 Sep 2017

To solve the problem, you should look in the Css section of breakpoints, and place at each point a limitation, for example in the small one, you must put @media (min-width: 601px) and (max-width: 944px) , for the medium @media (min-width: 945px) and (max-width: 1264px) and large @media (min-width: 1265px) and (max-width: 1903px).
Sorry for my English