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

[RoyiNamir]

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;

}

[NickIliev]

@RoyiNamir use textWrap property set to true

<Label [text]="isLoggingIn ? 'Sign up here' : 'Now Now Back to login'" textWrap="true" ></Label>

Demo project can be fond here

Apart from that, you can also use text-align : center to make sure your Label is horizontally aligned in the center. D

[RoyiNamir]

@NickIliev
That causes it to be in 2 rows
https://i.stack.imgur.com/lSNr6.png

[khoroshulia]

@NickIliev Hi. I face the same issue but only on iOS (android works fine). In my case it's any label in FlexboxLayout. After text update it doesn't increase/decrease width of label. Setting textWrap to true doesn't help, the width stays the same and text just wraps if it doesn't feet.

The problem here is that I tried to request layout manually so it would measure and layout child again with new width. But it didn't help.

const card: UIView = this.card.nativeElement.nativeView // FlexboxLayout that contains label card.setNeedsUpdateConstraints(); card.setNeedsLayout(); card.layoutIfNeeded();

It would be really helpful if you point me to source code related to FlexboxLayout so I could figure out how to properly request layout update

[RoyiNamir]

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>

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.