Grid Flex Error


#1

Hey guys,

I’m with problems concerning grid.
In android 2.3 emulator it is not obeying the flex.

Some solution?

Attached Image:


#2

One more print.


#3

This is probably a case of android 2.3 not having full support for Flex box

http://caniuse.com/#search=flex


#4

weird, I’m testing on a Samsung tablet with Android 4.1.2 and is also going the same problem

The code:

<div class="row">
  <div class="col-30">
    <div class="row">
      <div class="col-50 equipe">
        <img ng-src="{{jogo.equipe1.img}}">
      </div>
      <div class="col-50 placar">
        <span>{{equipe1}}</span>
      </div>
    </div>
  </div>
  <div class="col-30 palpites">
    <button>Palpite</button>
  </div>
  <div class="col-30">
    <div class="row">
      <div class="col-50 placar">
        <span>{{equipe2}}</span>
      </div>
      <div class="col-50 equipe">
        <img ng-src="{{jogo.equipe2.img}}">
      </div>
    </div>
  </div>              
  <a class="col-10 lk-jogo" href="#/app/jogo/{{jogo.id}}">
    <i class="ion-ios7-arrow-right"></i>
  </a>
</div>

#5

Not 100% sure of what I should be looking for…


#6

I add im my css that col-30 to works

.col-30 {-webkit-box-flex: 0;-webkit-flex: 0 0 30%;-moz-box-flex: 0;-moz-flex: 0 0 30%;-ms-flex: 0 0 30%;flex: 0 0 30%;max-width: 30%;}

#7

Ahh alright, you wanted to explicitly set it to 30%, that went right over my head :smile:
Yes, the grid does not have 30% width for col, so your css is needed.


#8

but in the previous examples already in this css style, and this error happens


#9

someone has gone through this problem?