Ionic list - reorder feature - content pushed off screen

ionic-v1
1

The reorder option on the codepen example pushes the list item content to the left, off the screen. So the user needs to reorder items without being able to see the items.

Is there a way to prevent the items being pushed off the screen?

(As one way to solve the issue, perhaps it would make sense for the reorder handles to appear in the same place as the delete buttons)

Thank you for reading and especially for this framework.

2

This was done on purpose. Before, we were just animating the margin and the reorder button in. This was really bad for performance, and caused choppy animations on real devices.

So we made the animation move translate the content using translate3d, so it’s hardware accelerated.

3

Thanks, that is interesting to learn.

My concern was mostly the reorder handle appearing on the right-hand side of the list, pushing the content leftwards and off the screen.

To resolve this, I hacked the ionic file (and I feel dirty for doing so!) to make the handle appear on the left, in the same place as the delete button. I’ll post what I did below in case it helps anyone else.

Is this an option you would want formally included in the framework? If so, I’d be happy to do it in a bit less hacky manner and submit a PR.

ionic-angular.js

$element.children().toggleClass('list-right-editing', isShown);

change list-right-editing to list-left-editing

var ITEM_TPL_REORDER_BUTTON =
  '<div data-prevent-scroll="true" class="item-right-edit item-reorder enable-pointer-events">' +
  '</div>';

change item-right-edit to item-left-edit

4

thanks Markau, your solution worked brilliantly.
I had to add this custom CSS though

.custom-icon-reorder  // added this class to the ion-item
  .item-content
    margin-left: 32px // this ensures the handle is visible
                      // otherwise the content of the ion-item
                      // blocks the ion-reorder-button

.ion-navicon:before // optional styling from my part
  color: #ccc
  font-size: 20px
5

So we made the animation move translate the content using translate3d, so it’s hardware accelerated.

Now animation is smooth and fast but whole reorder is unusable because people don’t see what they are reordering. There has to be some better solution to this.

I appreciate your hard work but please look into this once more. Thanks.

6

I also thought this was a bug when I noticed the change. Just looking at the demo in the docs shows this is a bit of a problem especially when the item text is short. Tapping ‘Reorder’ slides far enough off screen that only the digit still remains.

http://ionicframework.com/docs/api/directive/ionList/

7

I have a fix!

.list-right-editing .item-right-editable .item-content, .item-right-editing.item-right-editable .item-content {
    -webkit-transform: none;
    transform: none;
}