Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

responsive-sm not working on WP8

See original GitHub issue

Hi,

I know that support for WP8 will appear after the released ionic 1.0.0 but is a bug in responsive-sm

The small code in blank starter

  <body ng-app="starter">

    <ion-pane>
      <ion-header-bar class="bar-stable">
        <h1 class="title">Ionic Blank Starter</h1>
      </ion-header-bar>
      <ion-content>
     <div class="row responsive-sm">
          <div class="col">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
          <div class="col">.col</div>
          <div class="col">.col</div>
          <div class="col">.col</div>
    </div>
      </ion-content>
    </ion-pane>
  </body>

with responsive-sm (broken) http://i60.tinypic.com/264q87t.jpg http://i57.tinypic.com/25i55vk.jpg

without responsive-sm

http://i57.tinypic.com/2h5uyrd.jpg http://i57.tinypic.com/29axnkk.jpg

Do you have any plan to fit it?

http://forum.ionicframework.com/t/wp8-responsive-sm-not-workig/4759

Issue Analytics

State:
Created 9 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

1reaction

BeaveAronycommented, Feb 2, 2016

The @media parts in the css are the problem, it seems. Instead of flex: 1; it should be flex: 1 0 auto;

My fix is in my css file like this: @media (max-width: 567px) { .responsive-sm .col, .responsive-sm .col-10, .responsive-sm .col-20, .responsive-sm .col-25, .responsive-sm .col-33, .responsive-sm .col-34, .responsive-sm .col-50, .responsive-sm .col-66, .responsive-sm .col-67, .responsive-sm .col-75, .responsive-sm .col-80, .responsive-sm .col-90 { flex: 1 0 auto; } } @media (max-width: 767px) { .responsive-md .col, .responsive-md .col-10, .responsive-md .col-20, .responsive-md .col-25, .responsive-md .col-33, .responsive-md .col-34, .responsive-md .col-50, .responsive-md .col-66, .responsive-md .col-67, .responsive-md .col-75, .responsive-md .col-80, .responsive-md .col-90 { flex: 1 0 auto; } } @media (max-width: 1023px) { .responsive-lg .col, .responsive-lg .col-10, .responsive-lg .col-20, .responsive-lg .col-25, .responsive-lg .col-33, .responsive-lg .col-34, .responsive-lg .col-50, .responsive-lg .col-66, .responsive-lg .col-67, .responsive-lg .col-75, .responsive-lg .col-80, .responsive-lg .col-90 { flex: 1 0 auto; } }

It could break in the future, but hopefully the ionic team might just change their stylesheet.

0reactions

mglmglcommented, May 23, 2016

Thx, your workaround works for Windows 10 too!