CODEWITHSUNDEEP
angularjslistviewionic-framework
user2471982
user2471982

Reputation: 75

Combine "Checkbox" & "Avatar" in an Ionic Framework List

I am a noice programmer and new to the Ionic Framework and Angular.js. I am developing a mobile app using Ionic primarily "out of the box". But, I'd like to display an Ionic list that combines a:

See mockup below...

Desired Display - Mockup

A streamlined example of the HTML markup looks like this:

  <ion-pane>
    <ion-header-bar class="bar-stable">
      <h1 class="title">Combine Checkbox &amp; Avatar in List</h1>
    </ion-header-bar>
  <ion-content>
    <ul class="list">

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #1
      </li>

      <li class="item item-checkbox item-avatar-right">
        <label class="checkbox">
          <input type="checkbox">
        </label>
        <img src="http://placehold.it/100x100">
        Item #2
      </li>

    </ul>
  </ion-content>
</ion-pane>

But the page is displayed like so:

Current Display

My questions:

You can see code with a simple example here:

Plunker Example Code

Appreciate guidance and direction from the Stackoverflow community!

Upvotes: 3

Views: 7199

Answers (3)

Luke Taylor
Luke Taylor

Reputation: 9561

I was able to combine the item-avatar class with a checkbox by placing the checkbox on the right (using the item-checkbox-right class) and by overriding the min-height with 0.

My HTML:

<ion-content class="list">
  <ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
    <img ng-src="{{user.picture}}">
    <h2>{{user.name}}</h2>
    <p>{{user.email}}</p>
  </ion-checkbox>
</ion-content>

I also had to add the following CSS rule:

.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
  min-height: 0;
}

I got a result like the following:

Upvotes: 3

arainone
arainone

Reputation: 1998

I was working on a solution for the same problem and i came up with this css class : item-checkbox-img

Just add it to the img tag in your ion-checkbox

You can see the result in this codepen, the image is resized and its absolute position places it to the right of the item

angular.module('ionicApp', ['ionic'])
  .controller('MainCtrl', function($scope) {});
body {
  cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
  vertical-align: middle;
  position: absolute;
  top: 0px;
  right: 15px;
  height: 100%;
}
<html ng-app="ionicApp">

<head>
  <meta charset="utf-8">
  <title>Toggles</title>
  <link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
  <script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>

<body ng-controller="MainCtrl">
  <ion-list style="height: 2000px">
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/350x150">
    </ion-checkbox>
    <ion-checkbox>ion-checkbox
      <img class="item-checkbox-img" src="http://placehold.it/100x100">
    </ion-checkbox>
  </ion-list>
</body>

</html>

Upvotes: 2

Matheus CAS
Matheus CAS

Reputation: 161

I think that you won't be able to achieve that with Ionic default CSS. Maybe you should work on some css to adjust some positions due to CSS incompatibilities between these elements. However, I could reach something very close to what you showed. Put the following item in your plunker code and give it a try:

<li class="item item-avatar-right item-checkbox">
    <img src="http://placehold.it/100x100">
    <label class="checkbox">
        <input type="checkbox">
    </label>
    <h2>Headline</h2>
    <p>Description</p>
</li>

Upvotes: 4

Related Questions