Line-height property breaks text alignment on Button (iOS) · NativeScript/NativeScript#6429

(3 留言) (0 反應) (0 負責人)TypeScript (23,592 star) (1,634 fork)batch import

backlogbughelp wantedos: ios

描述

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.

貢獻者指南

技術棧: typescriptioscss
領域: mobile
議題類型: bug
難度: 3
預計時間: half day
活動狀態: stale
清晰度: clear
前置要求: Basic iOS developmentNativeScript framework knowledgeCSS styling in NativeScript
新手友善度: 35
研究方向: Investigate the iOS button implementation in NativeScript, particularly how CSS properties like line height and text align are applied to UIButton. The similar issue #4906 may provide insight. Look at the iOS runtime code in the tns ios module, such as the styling system for buttons. Consider mapping CSS line height to native UILabel's attributes and ensuring it doesn't override textAlignment.