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.
Reactions are currently unavailable
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.