RadList Display Issues

proui

#1

I am using a RadList in 4.1.0 CORE and am running into styling issues with how the swipe templates are displayed in android only, on IOS the swiping is displayed as it is meant to (hidden until swiped, once swipe is done it gets re-hidden, no offsets)

I followed the official documentation here: http://docs.telerik.com/devtools/nativescript-ui/Controls/NativeScript/ListView/swipe-actions#swipe-actions

Screenshots taken on a Samsung Galaxy running 6.0.1

Before Swipe:

During Swipe (Notice the offset):

After Swipe (Offset still there, line barely visible):

XML of the radList

xmlns:lv="nativescript-ui-listview"..


            <lv:RadListView row="1" id="cartList" items="{{ cart }}" itemInsertAnimation="Slide" selectionBehavior="None" pullToRefresh="true" pullToRefreshInitiated="refresh" itemSwipeProgressEnded="onSwipeCellFinished" itemSwipeProgressStarted="onSwipeCellStarted" itemSwipeProgressChanged="onCellSwiping" swipeActions="true">
                <lv:RadListView.pullToRefreshStyle>
                    <lv:PullToRefreshStyle indicatorColor="white" indicatorBackgroundColor="white"/>
                </lv:RadListView.pullToRefreshStyle>
                <lv:RadListView.itemTemplate paddingLeft="5">
                    <GridLayout columns="*,*,*,*,*,*" class="{{ style }}">
                        <StackLayout col="0">
                            <Label text="{{ supplierCode }}"/>
                            <Label text="{{ description }}" textWrap="true"/>
                        </StackLayout>
                        <Label col="1" text="{{ unitSize }}"/>
                        <Label col="2" text="{{ quantity.cartons }}"/>
                        <Label col="3" text="{{ quantity.units }}"/>
                        <Label col="4" text="{{ '$' + price.price }}"/>
                        <Label col="5" text="{{ '$' + price.lineTotal }}"/>
                    </GridLayout>
                </lv:RadListView.itemTemplate>
                <lv:RadListView.itemSwipeTemplate>
                    <GridLayout columns="auto, *, auto" class="swipeStyle">
                        <StackLayout id="delete-view" col="0" class="swipeItemLeft" tap="onLeftSwipeClick">
                            <Label text="Delete" horizontalAlignment="left" horizontalAlignment="stretch"/>
                        </StackLayout>
                        <StackLayout id="edit-view" col="2" class="swipeItemRight" tap="onRightSwipeClick">
                            <Label text="Edit" horizontalAlignment="right" horizontalAlignment="stretch"/>
                        </StackLayout>
                    </GridLayout>
                </lv:RadListView.itemSwipeTemplate>
            </lv:RadListView>

SCSS of the styles applied

%Swipe{
    padding: 16;
    color: #FFFFFF;
}

.swipeItemLeft {
    @extend %Swipe;
    background-color: #EF473A;
}

.swipeItemRight {
    @extend %Swipe;
}

.swipeStyle{
    background-color: white;
    width: 100%;
}

// List item style
.listItem{
    padding: 20;
    margin:20;
    text-align: left;
    min-height: 48em;
    line-height: 48em;
}