Feature request: css line-height

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

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)

👍

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);
    }   
}

@AntonioCuevaUrraco

@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?

@mbektchiev

@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.

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?

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

+1 from t.1114872

+1

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

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

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

Added line-height css property (#919)

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.

Navigation Menu

Repository navigation

Feature request: css line-height #1664

Why:

3 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Feature request: css line-height #1664

Description

Why:

Activity

vjoao commented on Feb 28, 2016

burkeholland commented on Feb 29, 2016

AntonioCuevaUrraco commented on May 13, 2016

mikebranstein commented on Aug 16, 2016

AntonioCuevaUrraco commented on Aug 17, 2016

lukeramsden commented on May 9, 2017

Acanguven commented on May 11, 2017

NickIliev commented on Jun 19, 2017

simonox commented on Jun 20, 2017

Pinny3 commented on Jun 20, 2017

bitworking commented on Jun 29, 2017

3 remaining items

mikebranstein commented on Aug 1, 2017

lock commented on Aug 28, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions