Ion-grid - Column / row alignment & overlaps

Ionic Framework ionic-v3
1

I am trying to move my code from pure HTML / CSS / Flexbox to ion-grid.

The plunker: https://plnkr.co/edit/Z7KgJyjx4yopSbxVMHMo?p=preview

What I want to display: image

Using the code:

 <ion-list>
   <ion-item text-wrap no-padding>
      <div style="margin-bottom: 5px;">
        <div>
          <div style="float: left; display:flex">
            <ion-icon style="color: black; font-size: 50px; margin: auto" name="happy"></ion-icon>
            <div style="padding-left: 5px; margin: auto">
              <div style= "font-size: 120%;">Sortie à vélo matinale - Col du Mollard</div>
              <div>Olivier Cherrier</div>
            </div>
          </div>
          <div style="clear: both; float:left; display: flex">
            <div style="width: 40px; text-align:center">
              <ion-icon style="color: black; font-size: 20px; margin: auto" name="bicycle"></ion-icon>
            </div>
            <span style=" padding-left: 5px; margin: auto">83.5 km</span>
            <span style=" padding-left: 5px; margin: auto; margin-left: 10px">200 m</span>
          </div>
        </div>
      </div>
   </ion-item>
 </ion-list>

I did not succeed to get the same layout and behavior on resizing using ion-grid.

First, I tried the approach: "One column for all icon and Next column for texts"

Code below:

<ion-list>
    <ion-item text-wrap no-padding>
      <ion-grid no-padding>
        <ion-row center>
          <ion-col > <!-- Column image -->
            <ion-row center >
              <ion-col style="text-align: center">
                <ion-icon style="color: black; font-size: 50px" name="happy"></ion-icon>
              </ion-col>
            </ion-row >
            <ion-row center>
              <ion-col style="text-align: center">
                <ion-icon style="color: black; font-size: 20px" name="bicycle"></ion-icon>
              </ion-col>
            </ion-row>
          </ion-col>
          <ion-col > <!-- Column text -->
            <ion-row center>
              <ion-col>
                <p style= "font-size: 110%;">Sortie à vélo matinale - Col du Molard</p>
                <p style= "font-size: 80%;">Olivier Cherrier</p>
              </ion-col>
            </ion-row>
            <ion-row center>
              <ion-col>
                <span >83.5 km</span>
                <span style="margin-left: 10px">200 m</span>
              </ion-col>
            </ion-row>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>

I get this results when resizing: text over the icon and icons are not well centered
image

Secondly, I tried the approach Same line for Happy Icon, “Col du Mollard” and “Olivier Cherrier” and Next line for bicycle icon, "83.5 km 200m"

Code below:

  <ion-list>
    <ion-item text-wrap no-padding>
      <ion-grid no-padding>
        <ion-row center >
          <ion-col style="text-align: center" no-padding >
            <ion-icon style="color: black; font-size: 50px" name="happy"></ion-icon>
          </ion-col>
          <ion-col width-90>
            <p style= "font-size: 110%;">Sortie à vélo matinale - Col du Molllard</p>
            <p style= "font-size: 80%;">Olivier Cherrier</p>
          </ion-col>
        </ion-row>
        <ion-row center>
          <ion-col  style="text-align: center" no-padding>
            <ion-icon style="color: black; font-size: 20px" name="bicycle"></ion-icon>
          </ion-col>
          <ion-col width-90 no-padding style= "font-size: 80%">
            <span >83.5 km</span>
            <span style="margin-left: 10px">200 m</span>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
  </ion-list>

I get this results: image

Icons and text are not well aligned.

I used:

cordova CLI: 6.4.0
Ionic Framework Version: 2.1.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.3
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v4.4.7
Xcode version: Not installed

Thank you for your help,

Olivier.

2

Hi,

do you need more details to advise?

Thank you by advance for your analysis / help.

Olivier.