Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Text is not centered when using lineHeight #20

Open
mBaldasty opened this issue Apr 9, 2024 · 3 comments
Open

Text is not centered when using lineHeight #20

mBaldasty opened this issue Apr 9, 2024 · 3 comments

Comments

@mBaldasty
Copy link

simplified template is
<GridLayout rows="auto, auto, auto, auto" columns="*, 10, auto" @tap="tapEvent" class="checklist-list-template"> <HTMLLabel text="item.machinery.firstname" class="headline2" row="0" col="0" textWrap="true" verticalTextAlignment="center" verticalAlignment="middle" lineHeight="50" backgroundColor="blue"/> <HTMLLabel text="item.machinery.lastname" row="1" col="0" textWrap="true" lineHeight="50" verticalTextAlignment="center" backgroundColor="red"/> <HTMLLabel textWrap="true" row="2" lineHeight="50" verticalTextAlignment="center" backgroundColor="green"> <FormattedString lineHeight="50" verticalTextAlignment="center" backgroundColor="green"> <Span text="qrCode"/> <Span text="parsedDueDate.text" lineHeight="50" verticalTextAlignment="center" backgroundColor="green"/> </FormattedString> </HTMLLabel> <HTMLLabel text="arrow_forward_ios" class="mdi-outlined-18px" row="0" col="2" verticalAlignment="top" horizontalAlignment="right"/> </GridLayout>

the text is not centered (also tried setting vertical-align: middle; via css text-alignment: center; works though).

Additionally lineHeight is not applied when using FormattedString (hence why i tried setting it everywhere in there).
Currently cant build for android so I can only confirm this for iOS.

used packages
"@nativescript/android": "8.6.2",
"@nativescript/ios": "8.6.3",
"@nativescript-community/text": "1.5.47",
"@nativescript-community/ui-label": "1.3.26",
"@nativescript/core": "8.6.2"

Simulator Screenshot - iPhone 14 Pro - 2024-04-09 at 11 05 56

@farfromrefug
Copy link
Member

@mBaldasty ok so that wont be easy to fix and is not a bug fix "per" say. The issue comes from "verticalAlignment".
In this case you seem to be using lineHeight as you would use height. If you set height of 50 for example with lineHeight of 20 then verticalTextAlignment works.

Settings verticalTextAlignment within "line" and its lineheight is out of the scope right now.

@mBaldasty
Copy link
Author

@farfromrefug those were my "remnants" from trying to get it centered.
Even if I just use lineHeight 50 (and no verticalAlignment etc). the text is not centered
Or is this this not intended to work?

@farfromrefug
Copy link
Member

@mBaldasty as i mentioned setting text vertical alignment within a "line" is out of the scope right(not even sure if it is possible).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants