Repository navigation
Line-height property breaks text alignment on Button (iOS) #6429
Description
Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):
✔ Component nativescript has 5.0.0-2018-10-15-12485 version and is up to date.
✔ Component tns-core-modules has 4.2.1 version and is up to date.
✔ Component tns-ios has 4.2.0 version and is up to date.
Android not tested
Describe the bug
Only occurs with the button. When using the attribute or CSS style for line-height combined with text-alignment, the line-height attribute will cause the contents to always be left-aligned.
To Reproduce
Add button and style with textWrap="true" , line-height and text-aligment:center.
.btn-test{ text-align:center; line-height:40; }
The first screen shows the button without using the line-height, only with textalign = center. The second screen shows the use of the line-height with the TextAlign center.
Expected behavior
Button text should keep the assigned text-align property.
Sample project
Additional context
Very similar behavior as in the case of another application
Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
Activity
tsonevn commentedon Oct 19, 2018
Hi @pkubasiak,
I was able to recreate the issue on my side and will mark this as a bug. I am also attaching a sample project, which can be used for debugging.
Archive.zip
ahmetceylan commentedon Jun 19, 2019
it seems this issue was fixed with #4909
Narkoleptika commentedon Jul 24, 2019
@ahmetceylan
Hi
I can confirm this issue.
Additionally, after checking
node_modules/tns-core-modules/ui/text-base/text-base.ios.jsin my project, I can also confirm that the changes from #4909 are present and do not resolve the issue.Relevant versions:
NathanWalker commentedon Oct 23, 2026
Fixed by #8181 (merged January 2020), the same fix as #8151: iOS text alignment is now applied to the Button's
titleLabel, soline-heightno longer forces Button text to the left. Closing as completed. Please open a new issue with a repro if it still misaligns on current@nativescript/core.