CODEWITHSUNDEEP
csscordovaionic-framework
TheJediCowboy
TheJediCowboy

Reputation: 9222

How do I align the text vertically with the check box in this list-item?

I am referencing a codepen sample that shows a list of ionic checkboxes that allow swipe and delete functionality.

The ONLY issue I am having is that the styling gets all messed up when this functionality is added. The checkbox text is not vertically lined up with the check box like I need it to. It should be to the right and vertically aligned with the checkbox icon

You can view the sample codepen here and use that to mess with the styling.

The ion-list markup looks like the following:

<ion-list show-delete="false"
            on-delete="onItemDelete(item)"
            can-swipe="true"
            option-buttons="itemButtons">

    <ion-item ng-repeat="item in items" item="item">
       <label class="checkbox">
        <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked">
        Item {{ item.id }}
      </label>

       <ion-option-button class="button-assertive icon ion-trash-a">
    </ion-item>

  </ion-list>

Wrong

enter image description here

Right

enter image description here

Upvotes: 0

Views: 3565

Answers (3)

kfa
kfa

Reputation: 2146

You're using angular and ionic... Keep up the good standing and use flex elements :) https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Jonathan Argentiero
Jonathan Argentiero

Reputation: 5727

<label class="checkbox">
  <input type="checkbox" ng-click="clickItem(item); $event.stopPropagation();" ng-model="item.checked" style="display:block;float:left;">
  <span style="display:block;float:left;line-height:28px;margin-left:10px;">Item {{ item.id }}</span>
</label>

Upvotes: 1

Love Trivedi
Love Trivedi

Reputation: 4046

Hi include this css in your css file

.checkbox input, .checkbox-icon {
  display: inline-block;
  vertical-align: middle;
}

also you can modify the spacing and color using css.

Upvotes: 0

Related Questions