Nativescript: Feature request: css line-height

[lawrencetaur]

I'd like the css line-height property implemented in {N}.

Why:

The current line height seems to be 100% and in a lot of websites i use, the line-height for text is 1.5 to 1.8.

I think this is how you do it on
Android
http://stackoverflow.com/questions/6863974/android-textview-padding-between-lines

and iOS
http://stackoverflow.com/questions/5494498/how-to-control-the-line-spacing-in-uilabel

That seems a bit complicated. So why there are many css properties in {N} i feel 'line-height' would be a great addition

Example:
This is how my app looks in Ionic

and in Nativescript

[vjoao]

If you can't wait for this to be implemented I suggest you to do it by calling the native APIs (setLineSpacing on Android or follow this thread for iOS)

[burkeholland]

:+1:

[AntonioCuevaUrraco]

For people that end up here before it is implemented, this is the manual way to do it.

function labelLineHeight(nsLabel) {

    if(isIOS){
        var label= nsLabel.ios;
        var attributedString;

        if(label.atributedText){
            attributedString = label.atributedText;
        }
        else{
            attributedString=NSMutableAttributedString.alloc().initWithString(label.text);
        }
        var paragraphStyle = NSMutableParagraphStyle.alloc().init();
        paragraphStyle.lineSpacing = 5;
        var range= NSMakeRange(0, label.text.length);
        attributedString.addAttributeValueRange(NSParagraphStyleAttributeName, paragraphStyle, range);
        label.attributedText = attributedString;
    }
    if(isAndroid){
        var label = nsLabel.android;
        //Default spacing is 20% of text size
        //setLineSpacing(add,multiplyby);
        label.setLineSpacing(12, 1);
    }   
}

[mikebranstein]

@AntonioCuevaUrraco I'm using this approach on several static pages, and it works well.

I occasionally run into an issue with labels that are data bound in iOS (I haven't tried on Android yet). It seems like I need to re-apply the paragraph style each time the text changes in the label. I don't know enough about iOS under the hood to be able to confirm this - does it sound right?

[AntonioCuevaUrraco]

@mbektchiev NativeScript has their own label.ios.atributedText on the core modules to set the properties that are supported on the css. I am not 100% sure but I think you have to re-apply on text changed because the ns core is overriding the atributedText that you just changed with the "original" one.

[lukeramsden]

This issue is a year old now and still not implemented. The code-behind workaround is good, but if your text is centered, then on iOS when you enter the view you can see it centered with the normal line-height, then left-aligned with the new line-height, then center-aligned with the new line-height - which really weird to the user.

Any ETA for this?

[Acanguven]

I am looking for this too. It is a really useful feature.

[NickIliev]

+1 from t.1114872

[simonox]

+1

[Pinny3]

Come on, this is one of a basic functionality that I expect from a framework which is based on CSS. So, when can I expect this?

+1

[bitworking]

Oh yes please. It's so hacky to change the line-height in "native" code. The other problem is that the UI is not refreshed after the change and the text is cutted because the container element doesn't change the height.

[EddyVerbruggen]

Thanks for the pointers @AntonioCuevaUrraco, your sample inspired PR #4534.

[mikebranstein]

@EddyVerbruggen and other {N} team, thanks for the updates! We appreciate you all!

[lock[bot]]

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.