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

user2471982 Published at Dev

user2471982

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!

Matheus CAS

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-14

Comments

0 comments

From Dev

Related Related

Article

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

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

How to combine Cordova, Crosswalk and Ionic framework

Get and set a checkbox in Ionic Framework (AngularJS)

How Calculate fields Selected Checkbox in Ionic Framework?

Ionic framework: The first item in Ionic list is disappeared

IONIC Framework Scroll issues in List

Ionic - Center text vertically in item-list with item-avatar class

Adding an icon to the right of an Avatar - Ionic

Right Align List Item Content in Ionic Framework

how to display a bullet list using ionic framework?

Difference between <ion-list> and <div class="list"> in Ionic framework?

How to change the size of item-avatar in ionic?

Ionic avatar cant put the notification icon

keep search input at the top of list view in ionic framework

Ionic framework: Different background color for each list-item

implementing a list view as native app with ionic framework angularjs and cordova

Ionic Framework: How to make two pictures in each list item with?

Ionic update Checkbox value

CheckBox in List

How to combine checkbox with jquery Datepicker

Ionic4: List item with multiple controls (inputs and checkbox) on one line

Canceling subscription Combine framework

Using Ionic Checkbox for To-Do Ionic app

combine tap and doubletap ionic events

combine tap and doubletap ionic events

Check only one checkbox in ionic

Ionic/Angular checkbox custom logic

IONIC Framework - Form Layout

Ionic framework form builder

swipe directive in ionic framework?