Nativescript: Label.formattedText Spans don't seem to be styleable with CSS

[sitefinitysteve]

Sample XML

        <Label class="logo-label" textWrap="false">
            <Label.formattedText>
                <FormattedString>
                    <FormattedString.spans>
                        <Span text="MED" class="prefix" />
                        <Span text="PORTAL" class="postfix" />
                    </FormattedString.spans>
                </FormattedString>
            </Label.formattedText>
        </Label>

CSS

.prefix{
    background-color: red;
    color: red;
}

.postfix{
    background-color: blue;
    color: blue;
}

Result:

The "logo-label" on the root label can be styled with margins\padding just fine... but the inner spans don't get anything.

[prawnsalad]

I'm also hitting this issue on Android, SDK 22.

The fontAttributes works, however CSS styles no matter where it is does not work.

[enchev]

Hey folks,

Span class inherits from Bindable not from View and that is why you cannot set CSS class, etc. It is not full blown UI component just bindable storage for various text settings.

[lukeramsden]

@enchev Whats the best way to have multiple fonts in one label then?

[NickIliev]

Hey, @lukeramsden some good news - there are some changes made in how FormattedString and Span are working and the changes will be introduced in our next major release. One of the changes is exactly what you are looking for - support for CSS classes.

[terreb]

@NickIliev, it's still not supported as of now, is it (tns-core-modules 3.1.0)?

[NickIliev]

Hey @terreb @lukeramsden

Styling via CSS for spans is now enabled and should work with tns-core-modules 3.1.0.
I have created this test application (using the code snippets above to demonstrate the styling for spans.

Side note: keep in mind that the CSS properties that you will be able to apply are the ones listed in the API references for the span module (meaning you will be able to apply color, background-color and font-size and all other listed properties but won't be able to apply margin and padding)

[lukeramsden]

@NickIliev Awesome!

[terreb]

@NickIliev, thanks a lot!

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