Why ion-list creates a large right padding on its items?

ionic-v1
1

The following markup:

<ion-list>
  <ion-item ng-repeat="record in records | orderBy:'date':true">
    <strong class="float-right">{{ record.amount | recordAmount }}</strong>
    {{ record.date | recordDate }}
    <ion-option-button class="button-info" ng-click="delete(record)">
      Delete
    </ion-option-button>
  </ion-item>
</ion-list>

results in:

http://dl.dropbox.com/u/1893981/Screenshots/b3x0.png

Is there a good reason why Ionic creates large padding (49px) on the right, rather than having the regular padding (16px) like on the left? Visually, it would look nicer if both left and right padding were the same.

I tried to change the right padding to 16px, and the swiping worked fine, so I can’t understand why large padding is needed. Any ideas?

Codepen

2

could you make a codepen?
which version of ionic are you using?
and which css are you using for float-right?

In my app i dont have the big padding, my code looks like this:

<ion-list>
	<div class="item item-divider" ng-repeat-start="(group, items) in data.list">
		{{group}}
	</div>
	<ion-checkbox ng-model="item.checked"  ng-repeat="item in items">
               {{ item.name }} 
               <span class="item-note"> {{item.date | date}} </span>
        </ion-checkbox>
	<div ng-repeat-end></div>
</ion-list>

i tried your code in my app it works fine

3

Codepen

The large padding is coming from:

.item-complex .item-content {
  padding: 16px 49px 16px 16px;
}

I use Ionic 1.0.0-beta.13.

(all the float-right class doing is setting float: right, so it’s not relevant to this issue)

4

item-complex is being added coze of the href attribute.
in my opinion the list thinks it have to add the typical > at the end. so it will add the item-complex

i would override it. :smiley:

5

item-complex is also added when using ion-delete-button causing right-padding even though the ion-delete-button is aligned to the left side.

It had to override it like this:

.item-content {
    padding-right: 16px !important;
}
3 Likes
6

Bumped into the same thing. It’s easy to overwrite, but I didn’t understand why it happened. Thanks @Auro for an explanation.