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


#1

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.

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;

}

#2

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


#3

@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.


#4

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;


#5

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>

enter image description here


#6

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

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

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