search

nativescript-community / ui-label

Alternative to the built-in NativeScript Label but with better performance and additional features such as HTML rendering and more.
Apache License 2.0
19 stars 7 forks source link

Text is not centered when using lineHeight #20

Open mBaldasty opened 5 months ago

mBaldasty commented 5 months ago

simplified template is ` <GridLayout rows="auto, auto, auto, auto" columns="*, 10, auto" @tap="tapEvent" class="checklist-list-template">

<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"/>

`

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 commented 5 months ago

@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 commented 5 months ago

@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 commented 5 months ago

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