Nativescript's Label - doesn't update its width according to a new value?

Question

I'm facing a wierd width problem.I'm using the Groceries sample app from Nativescript's Docs.

Looking at the bottom label : "sign up here" :

• We do see all the content.

Now - if a user clicks that Label - there is a new text instead :

     <Label width="auto" [text]="isLoggingIn ? 'Sign up here' : 'Back to login'"  ></Label>

But now look what happens :

The width is not adjusted to a longer text and instead put ... at the end.

So I've made an experiment : what if the initial text were long enough at first place ?

So I did this :

 <Label width="auto" [text]="isLoggingIn ? 'Sign up here22222' : 'Back to login'"  ></Label>

So initially it's :

And hooray -

I see all the content. - But this is an ugly hack.

Question:

How can I set the label width to automatically show all content without cropping ?

---

Additional Info :

Css for that Label and its stacklayout :

.sign-up-stack {
    background-color: #311217;
}
.sign-up-stack Label {
    color: white;
    horizontal-align: center;
    font-size: 15;
    border-radius:10;
     border-color:#FF0000;
    border-width: 1;

}

Answer 1

Answer is :

.sign-up-stack Label {
    ...
    width: 100%;
    text-align: center;
}

And :

<StackLayout #signUpStack
                     class="sign-up-stack"
                     (tap)="toggleDisplay()"
                     translateY="50">
            <Label [text]="isLoggingIn ? 'Sign up here' : ' Back to login'"       ></Label>
        </StackLayout>