Skip to content

Custom ActionItem gets displaced in IOS #2256

@vakrilov

Description

@vakrilov

Please, provide the details below:

Tell us about the problem

Custom action item with ios.postion="right" moves to the left when text of the button inside is changed. The bug occurs only when the custom item inside the ActionItem has the same size after the change. If the size is changed it gets positioned correctly.

Here is a repo code:

XML:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="navigatingTo">
  <Page.actionBar>
    <ActionBar>
      <ActionItem ios.position="right" tap="change">
        <Button text="{{ text }}" backgroundColor="red"/>
      </ActionItem>
    </ActionBar>
  </Page.actionBar>
</Page>

TS:

import { EventData } from "data/observable";
import { Page } from "ui/page";
import { Observable } from "data/observable";

const context = new Observable();
const values = ["--i--", "-i---", "-i-"];
var count = 0;

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function navigatingTo(args: EventData) {
    // Get the event sender
    var page = <Page>args.object;
    page.bindingContext = context;
    change();
}

// Event handler for Page "navigatingTo" event attached in main-page.xml
export function change() {
    context.set("text", values[count++ % 3]);
}

The issue is easily reproducible if icon font is used for the text of the button or if it has width set.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions