Combine “Checkbox” & “Avatar” in an Ionic Framework List

3
votes

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:

  • checkbox
  • item content (e.g. string of text)
  • avatar (i.e. an image associated with the item)

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:

  • Does the Ionic Framework support this combination (combining a checkbox and an avatar image in a list item)?
  • If so, what markup or code (HTML, CSS, JS) can I use to render this type of display?

You can see code with a simple example here:

Plunker Example Code

Appreciate guidance and direction from the Stackoverflow community!

3
angularjslistviewionic

3 Answers

4
votes

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>
3
votes

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:

2
votes

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>