Ion-grid and ion-item-options won't slide from right

#1

Hey all,

I’m having a bit of an issue. I’m able to use the following to successfully create a dropdown box next to a label which adds items to a list displayed below in another row. All is working fine, except that I want the ion-item-sliding to slide the entire row over, not just the part that has content in it. Right now if it’s revealing the “Favorite” and “Delete” buttons for an item that only fills half the length of the screen, the buttons show up right in the middle, instead of to the right. Am I missing something here?

<ion-grid>
   <ion-col>   
    <ion-row>          
          <ion-label color="secondary"><ion-icon name="eye"></ion-icon>&nbsp;Public Comment</ion-label>
          <select-searchable
            item-content
            name="Public Comment"
            [(ngModel)]="publicComment"
            itemValueField="rowid"
            itemTextField="HAN_DESCRIPTION"
            [canSearch]="true"
            [items]="publicCommentsFilteredList"
            searchPlaceholder="Enter public comment"
            (onSearch)="publicCommentsSearch($event)"
            (onChange)="PublicCommentsSelect($event)">
            <ng-template selectSearchableItemTemplate let-comment="item">   
              <ion-icon name="paper" *ngIf="comment.CATEGORY === 'historical'"></ion-icon>
                <ion-icon name="lock" *ngIf="comment.CATEGORY === 'pinned'"></ion-icon>
                {{comment.HAN_DESCRIPTION}}            
            </ng-template>  
          </select-searchable>    
        </ion-row>
        <ion-row>
            <ion-label>Selected Public Comments: &#13;</ion-label><br>   
        </ion-row>
        <ion-row>
            <ion-list>
                <ion-item-sliding *ngFor="let comment of selectedPublicComments; let i=index">
                <ion-item text-wrap>
                    {{comment.HAN_DESCRIPTION}}              
                </ion-item>
                <ion-item-options side="right">
                  <button ion-button color="danger" (click)="deleteDataPublic(comment)">
                    <ion-icon name="trash"> Delete</ion-icon>
                  </button>
                  <button ion-button color="secondary" outline small (click)="FavoriteCommentPublic(comment)">
                      <ion-icon name="unlock"> Favorite  </ion-icon>
                  </button>
                </ion-item-options>
              </ion-item-sliding>
            </ion-list>
        </ion-row>
    </ion-col>
</ion-grid>