iOS ActionBarItems overlapping before page load

hey guys I have an action bar thats labels overlap on load then pop to the right spots when its loaded.

tns version: 2.0.0
package.json: "version": "2.0.0",

Here is a barebones project showing the issue:
actionBarGlitch.zip

Here is a video showing the issue.
teamreps nav bug.zip

markup looks like this:

    <Page.actionBar>
        <ActionBar>
            <ActionBar.titleView>
                <Label text="TEAMREPS" class="logo" />
            </ActionBar.titleView>
            <ActionBar.actionItems>                
                <ActionItem ios.position="left" tap="logout">
                    <ActionItem.actionView>

                            <Label text="&#xf013;" class="font-awesome-icon nav-icon"  />

                    </ActionItem.actionView>
                </ActionItem>                
                <ActionItem ios.position="right" tap="addTeam">
                    <ActionItem.actionView>

                            <Label text="&#xf0fe;" class="font-awesome-icon nav-icon"  />

                    </ActionItem.actionView>
                </ActionItem>
            </ActionBar.actionItems>            
        </ActionBar>
    </Page.actionBar>

it also does it with in another view with this action bar:

    <Page.actionBar>
        <ActionBar>
            <ActionBar.titleView>
                <Label text="{{ pageTitle }}" />
            </ActionBar.titleView>
            <ActionBar.actionItems>
                <ActionItem ios.position="left" tap="dashboard">
                    <ActionItem.actionView>
                        <StackLayout>
                            <Label text="&#xf060;" class="font-awesome-icon nav-icon"  />
                        </StackLayout>
                    </ActionItem.actionView>
                </ActionItem>  
            </ActionBar.actionItems>
        </ActionBar>
    </Page.actionBar>

Looks like ActionItem ios.position="right" is reset on navigation transition
.. Possibly related to this style reset for the action-bar here #2171

Alright it isn't related to the ios.position, I just checked. It seems to be related to any use case of font- in the css, so font-family, font-size, etc. Below is a bare bones project showing the exact issue on a new project.

actionBarGlitch.zip

I can vouch for seeing this in his app, and replicating in the hello-world... second we add any font-family\size css to anything in the actionbar there... popping

@NickIliev

So @NickIliev it seems this totally breaks ANDROID as well... I've been killing myself for the last 4 hours trying to track down why this app just fails to load on android. Turns out it's the exact same issue... in that adding css in the custom actionbar breaks things. On iOS its just jumpy buttons, android outright tanks.

Video:
http://www.screencast.com/t/NYFBuORVUpo

Sidenote: Css in question

.logo{
    font-size: 40;
    margin-top: 20;
    margin-bottom: 40;
    font-family: 'ChangaOne-Italic';
    letter-spacing: 0;
}

@sitefinitysteve

@sitefinitysteve
I have played with this code and what seems to be the problem (in Android) is the css-property margin - when you set margin (or some of the sub-properties margin-top, margin-bottom, margin-left, margin-right) on element (in this case Label) which is part of ActionBar.titleView

As a workaround I have tried to wrap the label in container element like this:

<StackLayout >
    <Label text="TITLE" class="logo" />
</StackLayout>

This will solve your Label styling problem but however the main problem persist - now we can't set certain CSS-properties on the StackLayout.(same error thrown on Android with margin) - I will log this behaviour in new issue as this one has different focus. Logged in #2184

@firescript

Indeed when you use the long syntax for creating ActionItem the described behaviour is observed in iOS - on navigation the position of the ActionItems is not rendered correctly.As a temporary workaround uou can use the short syntax but then you can set fontIcons and must use the predefined system icons for iOS and Android.

<ActionBar.actionItems>
    <ActionItem  ios.systemIcon="12" android.systemIcon="ic_menu_search" tap="otherpage" />
    <ActionItem  ios.systemIcon="16" android.systemIcon="ic_menu_delete" tap="otherpage"  />
</ActionBar.actionItems>

To reproduce the issue create two pages with ActionBarItems using the extended syntax.
When navigation from pageA to pageB the ActionBarItems are placed in the top-left corner (iOS) at the beggining and then on final load the actual positions are applied.

pageA.xml & pageB.xml

<Page loaded="onLoaded" xmlns:lv="nativescript-telerik-ui/listview" xmlns="http://www.nativescript.org/tns.xsd">
    <Page.actionBar>
        <ActionBar>
            <ActionBar.titleView>
                <StackLayout>
                    <Label text="TITLE" />
                </StackLayout>
            </ActionBar.titleView>
        <ActionBar.actionItems>                
            <ActionItem tap="onTap">
                <ActionItem.actionView>
                    <StackLayout>
                        <Label text="Item 1"  />
                    </StackLayout>
                </ActionItem.actionView>
            </ActionItem>                
            <ActionItem  tap="onTap">
                <ActionItem.actionView>
                    <StackLayout>
                        <Label text="Item 2"  />
                    </StackLayout>
                </ActionItem.actionView>
            </ActionItem>
        </ActionBar.actionItems>              
      </ActionBar>
    </Page.actionBar>         
</Page>

pageA.ts (pageB.ts identical code only change moduleName value)

import { EventData } from "data/observable";
import { Page } from "ui/page";
import frameModule = require("ui/frame");

export function onLoaded(args: EventData) {
    var page = <Page>args.object;
}

export function onTap (args: EventData){
     frameModule.topmost().navigate({
        moduleName: "pageB",
        clearHistory: true
    });    
};

I can confirm when using icon fonts in the action bar, this is a problem still

If you download and run this repo, it demonstrates how the actionbar with font icons inside will weirdly 'snap' into place if you use ios.position:

https://github.com/tskweres/tinder-clone

Will be addressed with #3093

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Navigation Menu

Repository navigation

iOS ActionBarItems overlapping before page load #2179

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

iOS ActionBarItems overlapping before page load #2179

Description

Activity

NickIliev commented on May 25, 2016

firescript commented on May 25, 2016

sitefinitysteve commented on May 25, 2016

sitefinitysteve commented on May 25, 2016

NickIliev commented on May 26, 2016

NickIliev commented on May 26, 2016

tskweres commented on Oct 19, 2016

tskweres commented on Oct 20, 2016

tzraikov commented on Nov 15, 2016

lock commented on Aug 29, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions