user2471982 user2471982 - 3 months ago 49
AngularJS Question

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:


  • 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!

Answer

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>