ION-LIST fill left an right side with different contents

214 views Asked by At

I want to fill the left side and the right side of an ion-list with different Weatherdata of different countries. I hope someone can help me. I have been looking for a solution for hours.

CLICK HERE FOR THE GUI OF THE APPLICATION

THIS IS THE GUI OF THE GUI

This is how my code looks like for the selection of the ion-list:

<ion-view title="Termine" hide-nav-bar="true" id="page3" style="background-color: rgb(220, 220, 224);" >
  <ion-nav-buttons side="right">
      <button class="button button-icon icon ion-plus-round"></button>
  </ion-nav-buttons>
  <ion-content padding="true" class="manual-ios-statusbar-padding">

    <div ng-controller="WeatherBerlinCtrl">
    <!-- WEATHER SECTION -->
    <ion-list id="termine-list">
      <ion-item class="item-thumbnail-left" id="termine-list-item46"style="">

      <img src={{vWeatherLinkIcon}}>
      <h2 style="text-align: left; width:49%; display: inline-block; font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2> 

      <!-- <img style="float: right;" src={{vWeatherLinkIcon}}> -->
      <h2>Max: {{vWeatherMaxDegrees}} °C</h2>
      <h2>Min: {{vWeatherMinDegrees}} °C</h2>

<!--       <div class="item-thumbnail-right">
                <img style="float: right;"  src={{vWeatherLinkIcon}}>
     <div ng-controller="WeatherKabulCtrl">
      <h2 style="text-align: right; width:50%;  display: inline-block;  font-weight: bold;">Berlin {{vWeatherActDegrees}} °C</h2>
                      </div> -->

    </ion-list>
    <div class="spacer" style="width: 748px; height: 15px;"></div>`
1

There are 1 answers

0
Ostn On

What about using an ion-grid inside your ion-list ?

 <ion-grid>
  <ion-row>
    <ion-col>
      left
    </ion-col>
    <ion-col>
      right
    </ion-col>
  </ion-row>
</ion-grid>

ionic doc