Div class="col-80" doesn't work on android

ionic-v1
1

I have a row with 3 columns which use respectively the classes col-10, col-80 and col-10. It works fine on the browser, but on Android the second column is 0 wide.
As a result the button on the third column is attached to the first column, instead of being on the right of the screen like in the browser. How could I fix my problem?

<div class = "row">
   <div class ="col-10">
    {{  event.hh    }}:{{  event.mm}}
   </div>
   <div class="col-80 center">

          </div>
   <div class ="col-10 text-right">

       <button class="button button-dark" 
        >
      <i class="icon ion-edit"></i>
    </button>
   </div>
</div>
2

I believe you have to have col class in front of those, according to the docs. Try it out? It might make a difference or add an attribute. Also, what browser are you using and have you tried this on iOS?

If you make a code pen of this issue you can try it in the regular android browser too and that will give you some more insight

<div class="row">
  <div class="col col-10">
    {{ event.hh }}:{{ event.mm }}
  </div>

  <div class="col col-80 center">

  </div>

  <div class="col col-10 text-right">
    <button class="button button-dark">
      <i class="icon ion-edit"></i>
    </button>
  </div>
</div>
4

Hmm it also renders fine in Safari. Though the codepen isn’t wrapped in an ion-view or ion-content and that could change how it’s working.

What version of android did you see the issue on?

5

Sorry, the problem was due the missing col in front as you first wrote.

6

Haha, I’m glad it’s fixed though.

Positioning problems are my least favorite haha.