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;

}

@Aravind why BR ? I don't want any new line ! I want to see "back to login" in one line — Royi Namir, Nov 20 '17 at 13:38

score 1 · Answer 1 · edited Nov 20 '17 at 20:48

1

Can you try adding textWrap="true" to that label ?

edited Nov 20 '17 at 20:48

Royi Namir

144,742
138
468
792

answered Nov 20 '17 at 13:33

Eddy Verbruggen

3,550
1
15
27

I don't want new line. I want to see it in a single line.Instead of "'Sign up here'" - I want to see : "'Back to login'" – Royi Namir Nov 20 '17 at 13:38

score 1 · Accepted Answer · answered Nov 21 '17 at 08:06

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>

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

2 Answers2