Search code examples
nativescript

In NativeScript, how can I make a label automatically resize to fit content?

I have two buttons with a label in between. When a button is tapped, the label text changes, but it appears to have a static width set to the width of the initial text. When the text gets longer, part of it is replaced with an ellipses.

The code is pretty simple.

<StackLayout orientation="horizontal">
    <Button text="<" tap="onPreviousLevel"></Button>
    <Label id="title" text="{{ name }}"></Label>
    <Button text=">" tap="onNextLevel"></Button>
</StackLayout>
Solution

  • Setting the horizontal alignment for labels seems to make them responsive (change based on content).

    In CSS this would be

    #title {
    horizontal-align: center;
}