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


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” :

enter image description 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 :

enter image description here

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 :

enter image description here

And hooray -

enter image description here

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


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-width: 1;



did you try setting
textWrap="true" on that Label element?


@multishiv19 Yes. And here is the result ( however - I don’t see how does wrapping which deals with text in new line relates to cropping and adding ...)) :

My problem is not about new line. it’s about width.


try to set to full width

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

or you can set the full width in .sign-up-stack css class and add text-align: center;


Answer is :

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

And :

<StackLayout #signUpStack
            <Label [text]="isLoggingIn ? 'Sign up here' : ' Back to login'"       ></Label>

enter image description here


I’m new to this but this method has seemed to work for me.

var labelView = view.getViewById(page, "labelId");

Found here. It refreshes all the labels though. You may or may not want that.