[iOS] FAB is invisible about nativescript-floatingactionbutton

[bradmartin]

What's the full markup?

On Thu, Nov 3, 2016, 8:34 AM bm-software [email protected] wrote:

I'm testing my app, built with Typescript and Angular 2, on ios emulator
and while on Android everything works fine, on iOS the FAB dowsn't show up.
The code is the same for both platforms:

<Fab row="1" class="fab-button"
(tap)="showAddContactModal()"
icon="res://ic_add_white_48dp"
rippleColor="#f1f1f1"
verticalAlignment="bottom"
horizontalAlignment="right"
hideOnSwipeOfView="contactsList">

What is the problem?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#37,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhFlXc_DvxaGY-izXrxEQOiylRlJjks5q6eL4gaJpZM4KoXFB
.

[michelebombardi]

@bradmartin Sorry, here is the full markup:

<GridLayout rows="auto, *">
    <StackLayout row="1">
        <location></location>

        <CardView shadowColor="#949494" elevation="10" margin="10">
            <StackLayout orientation="vertical">
                <Label text="Numeri Personali" verticalAlignment="center" horizontalAlignment="left" textWrap="true" class="card-header"></Label>
                <StackLayout class="hr-light"></StackLayout>

                <GridLayout rows="*" *ngIf="contacts.length === 0">
                    <Label row="0" text="Nessun contatto inserito." verticalAlignment="center" horizontalAlignment="center" 
                        textWrap="true" class="h3 font-italic">
                    </Label>
                </GridLayout>

                <RadListView id="contactsList" [items]='contacts' selectionBehavior="None" *ngIf="contacts.length > 0"
                    (itemTap)="onItemTap($event)"
                    (itemHold)="onItemHold($event)"
                    itemSwipe="false"
                    pullToRefresh="true"
                    (pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
                    <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" 
                        itemInsertAnimation="Default" itemDeleteAnimation="Default">
                    </ListViewLinearLayout>

                    <template tkListItemTemplate let-contact='item' >
                        <StackLayout>
                            <GridLayout columns="80, *">
                                <Image col="0" [src]="contact.icon" stretch="aspectFill" verticalAlignment="center" horizontalAlignment="center" class="contact-icon"></Image>
                                <StackLayout col="1" verticalAlignment="center" horizontalAlignment="left" color="black" margin="5 0">
                                    <Label [text]="contact.name" verticalAlignment="center" horizontalAlignment="left" textWrap="true" id="personalContactName" class="h2"></Label>
                                    <Label [text]="contact.phone" verticalAlignment="center" horizontalAlignment="left" class="h3"></Label> 
                                    <Label [text]="contact.notes" verticalAlignment="center" horizontalAlignment="left" textWrap="true" class="h3 font-italic"></Label>
                                </StackLayout>
                            </GridLayout>
                            <StackLayout class="hr-light"></StackLayout>
                        </StackLayout>
                    </template>

                    <GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="listItemSwipeGridLayout">
                        <StackLayout id="mark-view" class="markViewStackLayout" col="0" (tap)="onLeftSwipeClick($event)">
                            <Label text="mark" verticalAlignment="center" horizontalAlignment="center"></Label>
                        </StackLayout>
                        <StackLayout id="delete-view" class="deleteViewStackLayout" col="2" (tap)="onRightSwipeClick($event)">
                            <Label text="delete" verticalAlignment="center" horizontalAlignment="center"></Label>
                        </StackLayout>
                    </GridLayout>
                </RadListView>
            </StackLayout>
        </CardView>
    </StackLayout>

    <Fab row="1" class="fab-button"
        (tap)="showAddContactModal()"
        icon="res://ic_add_white_48dp"
        rippleColor="#f1f1f1"
        verticalAlignment="bottom"
        horizontalAlignment="right"
        hideOnSwipeOfView="contactsList">
    </Fab>
</GridLayout>

[bradmartin]

Just dawned on me. On iOS height and width are required, try setting those
values and it should render.

On Thu, Nov 3, 2016, 9:50 AM bm-software [email protected] wrote:

@bradmartin https://github.com/bradmartin Sorry, here is the full
markup:

    <CardView shadowColor="#949494" elevation="10" margin="10">
        <StackLayout orientation="vertical">
            <Label text="Numeri Personali" verticalAlignment="center" horizontalAlignment="left" textWrap="true" class="card-header"></Label>
            <StackLayout class="hr-light"></StackLayout>

            <GridLayout rows="*" *ngIf="contacts.length === 0">
                <Label row="0" text="Nessun contatto inserito." verticalAlignment="center" horizontalAlignment="center"
                    textWrap="true" class="h3 font-italic">
                </Label>
            </GridLayout>

            <RadListView id="contactsList" [items]='contacts' selectionBehavior="None" *ngIf="contacts.length > 0"
                (itemTap)="onItemTap($event)"
                (itemHold)="onItemHold($event)"
                itemSwipe="false"
                pullToRefresh="true"
                (pullToRefreshInitiated)="onPullToRefreshInitiated($event)">
                <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical"
                    itemInsertAnimation="Default" itemDeleteAnimation="Default">
                </ListViewLinearLayout>

                <template tkListItemTemplate let-contact='item' >
                    <StackLayout>
                        <GridLayout columns="80, *">
                            <Image col="0" [src]="contact.icon" stretch="aspectFill" verticalAlignment="center" horizontalAlignment="center" class="contact-icon"></Image>
                            <StackLayout col="1" verticalAlignment="center" horizontalAlignment="left" color="black" margin="5 0">
                                <Label [text]="contact.name" verticalAlignment="center" horizontalAlignment="left" textWrap="true" id="personalContactName" class="h2"></Label>
                                <Label [text]="contact.phone" verticalAlignment="center" horizontalAlignment="left" class="h3"></Label>
                                <Label [text]="contact.notes" verticalAlignment="center" horizontalAlignment="left" textWrap="true" class="h3 font-italic"></Label>
                            </StackLayout>
                        </GridLayout>
                        <StackLayout class="hr-light"></StackLayout>
                    </StackLayout>
                </template>

                <GridLayout *tkListItemSwipeTemplate columns="auto, *, auto" class="listItemSwipeGridLayout">
                    <StackLayout id="mark-view" class="markViewStackLayout" col="0" (tap)="onLeftSwipeClick($event)">
                        <Label text="mark" verticalAlignment="center" horizontalAlignment="center"></Label>
                    </StackLayout>
                    <StackLayout id="delete-view" class="deleteViewStackLayout" col="2" (tap)="onRightSwipeClick($event)">
                        <Label text="delete" verticalAlignment="center" horizontalAlignment="center"></Label>
                    </StackLayout>
                </GridLayout>
            </RadListView>
        </StackLayout>
    </CardView>
</StackLayout>

<Fab row="1" class="fab-button"
    (tap)="showAddContactModal()"
    icon="res://ic_add_white_48dp"
    rippleColor="#f1f1f1"
    verticalAlignment="bottom"
    horizontalAlignment="right"
    hideOnSwipeOfView="contactsList">
</Fab>

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
#37 (comment),
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFulhNjRs50IcbrPfOl9K0LOeJjE7DQjks5q6fSSgaJpZM4KoXFB
.

[michelebombardi]

@bradmartin Yes, now it render, but the icon is not shown. I've included it in AppResource ios folder with three dimensions;

• ic_add_white_48dp: 16x16
• ic_add_white_48dp@2x: 32x32
• ic_add_white_48dp@3x: 48x48

Is that ok? Why I can't see the add icon?

[sitefinitysteve]

@bm-software Can you add the icon to the actionbar or something to see if it shows up there?

[michelebombardi]

@sitefinitysteve Found the issue, it has a different name. Sorry :)

[bradmartin]

All good @bm-software ?

[michelebombardi]

@bradmartin Yes, now it works fine :)