Combine "Checkbox" and "Avatar" in the Ionic Framework list
I am a programmer new to Ionic Framework and Angular.js. I am developing a mobile application using Ionic primarily out of the box. But I would like to display a list of Ionyms that combines:
- element content (e.g. a line of text)
- (i.e. the image associated with the element)
See the layout below ...
A streamlined example of HTML markup looks like this:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Combine Checkbox & 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 displays like this:
My questions:
- Does the Ionic Framework support this combination (by combining the checkbox and the avatar image in the list item)?
- If so, what markup or code (HTML, CSS, JS) can be used to render this display type?
You can see the code with a simple example here:
Check out the Stackoverflow community guidance and direction!
source to share
I think you cannot achieve this with Ionic default CSS. Maybe you should work on some css to adjust some of the positions due to CSS incompatibility between these elements. However, I could achieve something very close to what you showed. Place the following code in your plunker code and 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>
source to share
I was able to combine the class item-avatar
with the checkbox by checking the checkbox on the right (using the class item-checkbox-right
) and overriding 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 similar to the following:
source to share
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 ion-checkbox
You can see the result in this code , the image will be resized and its absolute position puts it to the right of the element
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>
source to share