[Bug] Not able to apply CSS styling to Span control

[Depechie]

Description

Unable to use CSS styling on Span control inside FormattedText of Label.
Although the docs mention this https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/ ...

Steps to Reproduce

            <Label>
                <Label.FormattedText>
                    <FormattedString>
                        <Span Text="We want to hear your thoughts! Feel free to join our " />
                        <Span Text="Slack Organization" TextDecorations="Underline" />
                        <Span Text=" or send us an email at " />
                        <Span Text="testing@gmail.com" TextColor="#69d5b1" />
                    </FormattedString>
                </Label.FormattedText>
            </Label> 

We wanted to apply text color and text decoration through CSS styling, but were unable to do so.

Reproduction Link

Repository containing the page https://github.com/Coding-Coach/mobile/blob/556191e0d429a80a036d0928998255654c88d4e4/CodingCoach/CodingCoach/Views/ContactPage.xaml

[Depechie]

hey @StephaneDelcroix are we doing something silly here with css? Or are we reading the docs about css wrong? ( Span and text decoration is mentioned as supported )

[ackava]

@Depechie I checked your source code, I couldn't find where have you included your CSS in Resources of either App or the Page?

[Depechie]

hey @ackava yeah that was the whole point... it was just not working, so this issue report is a plee for having an example on how to do this. Also more info https://github.com/xamarin/xamarin-forms-samples/issues/457

[ackava]

@Depechie I guess its isn't this sufficient?

<Application ...>
    <Application.Resources>
        <StyleSheet Source="/Assets/styles.css" />
    </Application.Resources>
</Application>

Mentioned at https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/#xaml

[Depechie]

Ow no not that basic... I really did try a full css :)
It just does not pick up the attributes for span inside label.

[Depechie]

So for clarification @ackava I wanted to set the Underline in the second Span element in CSS. As the docs mention this should be possible ( https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/css/ ).

But no matter what I put in the styles.css, it would not be applied.

[Depechie]

@ackava I found the original link: Coding-Coach/mobile#21 and at that time we talked about it with @StephaneDelcroix and it was said to be a short coming on Span - css in XF. Hence the filed issue.

[michelevirgilio]

+1