[TNS 3] Wrapped text in Button not properly centered (iOS)

There seems to be a regression with the way wrapped text is centered in a NativeScript button on iOS.

Pre-TNS3, if you set style="text-align:center;" on a Button with textWrap="true", the text would be both A) centered in the Button, and B) any wrapped text would be centered on the new wrapped line.

With TNS3 (confirmed in 3.0.1 on iOS), those same style settings will center the text in the Button, BUT wrapped text on new lines will not be centered. Instead, wrapped text is left aligned.

The problem should be easy to reproduce using any button with style settings that cause the text to wrap. For example:

<Button text="This is a test of a Button text wrapping" textWrap="true" style="text-align:center;width:100;" />

Does not apply to Android or Label widgets. Text is properly centered when wrapped.

Based on my limited mastery of the underlying native iOS properties, I think this issue can be fixed by making a small change in this file: https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/button/button.ios.ts#L146

In this textAlignmentProperty implementation, you should be able to change this:

switch (value) {
   case "left":
      this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left;
      break;
   case "initial":
   case "center":
      this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Center;
      break;
   case "right":
      this.nativeView.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Right;
      break;
}

To this:

switch (value) {
   case "left":
      this.nativeView.titleLabel.textAlignment = NSTextAlignment.Left;
      break;
   case "initial":
   case "center":
      this.nativeView.titleLabel.textAlignment = NSTextAlignment.Center;
      break;
   case "right":
      this.nativeView.titleLabel.textAlignment = NSTextAlignment.Right;
      break;
}

I'd submit a PR directly, but not sure if there are reasons that using this approach was avoided in the first place. In my local tests, this does fix the text centering problem. Not sure if it creates other problems I'm missing.

@toddanglin

@toddanglin to demonstrate what is the difference between the original implementation and your suggestion I am attaching two screenshots.

Original implementation

Todd's code

@toddanglin

@toddanglin we've discussed this case and it would be great to use the wrapping as you have suggested. Let me now when you have a PR ready or let me know if you want for us to take care of it.

Okay. Let me test with Icon + Text scenario to make sure this new approach doesn't cause any problems. If it doesn't, I'll go ahead and submit a quick PR for the file mentioned above with the new alignment code for iOS.

EDIT
RE: The screenshots above. The second image ("Todd's Code") is also how text centering behaved in buttons on iOS pre-TNS3. Not sure what changed to trigger the current behavior, but this PR should "restore" the old layout behavior and make iOS consistent with Android again. Just adding context for future review to clarify that this PR would not introduce "new" behavior to iOS Button text alignment.

Okay. Confirmed that the new text alignment approach seems to work fine in iOS, including scenarios where the text includes unicode icons (see image below).

<Button text="This a test of a wrapping button [CENTER]" textWrap="true" style="text-align:center;width:100;margin-bottom:60;" />
<Button text="This a test of a wrapping button [RIGHT]" textWrap="true" style="text-align:right;width:100;margin-bottom:60;" />
<Button text="This a test of a wrapping button [LEFT]" textWrap="true" style="text-align:left;width:100;margin-bottom:60;" />
<Button text="&#xf8ff; This a test of a wrapping button [CENTER ICON]" textWrap="true" style="text-align:center;width:100;margin-bottom:60;" />

Layout with new text alignment applied

Layout with current un-patched behavior

While testing, I did notice that the height of a button with wrapped text does not seem to be properly calculated in our layout system. When I change the margin from 60 to 20 in the above code snippet, it produces overlapping buttons like this:

This occurs both with and without my proposed PR, so it is probably a separate issue that needs to be investigated. Just flagging here for future follow-up.

Meanwhile, will prepare the official PR and submit shortly.

PR created: #4273

Do you want me to create a new issue for the "overlapping button" problem?

@toddanglin

@toddanglin I have opened this issue for the overlapping problem in iOS.

@NickIliev

Thanks @NickIliev.

I think we can close this issue now since the PR with the fix has been merged (#4273).

@toddanglin

Hey @toddanglin, the fix is already available in tns-core-modules@next and will also be released with tns-core-modules@3.1.0

I'm on TNS 3.4.0 and am seeing the same problem with a label. Wrapped text is ignoring horizontalAlignment="center" and left aligns. Should i submit a new issue or is there a quick fix for it?

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.

Navigation Menu

Repository navigation

[TNS 3] Wrapped text in Button not properly centered (iOS) #4266

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[TNS 3] Wrapped text in Button not properly centered (iOS) #4266

Description

Activity

toddanglin commented on May 25, 2017

NickIliev commented on May 26, 2017

NickIliev commented on May 26, 2017

toddanglin commented on May 26, 2017

toddanglin commented on May 26, 2017

toddanglin commented on May 26, 2017

NickIliev commented on May 29, 2017

toddanglin commented on May 31, 2017

SvetoslavTsenov commented on May 31, 2017

BearOutThere commented on Mar 15, 2018

lock commented on Aug 27, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions