Android HtmlView Does not accept size or font face styling

4 posts, 0 answers
  1. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 24 Aug Link to this post

    Html view in android does not accept styling or font-family. IOS this works.

    Here is a sample code that does not style correctly
    <HtmlView html="<span><b><font size='10' color='blue' face='lato'>{{item.text}} </font></b></span>" </HtmlView>

    Please suggest a fix or workaround.
  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 24 Aug Link to this post

    Hello Anurag,

    Thank you for your interest in NativeScript!
    It seems that your code snippet is missing a closing bracket for the HTML tag (after the closing span).which may lead to undesired behavior. After adding the closing tag the HTML was applying the styles as expected.

    <HtmlView html="<span><b><font size='10' color='blue' face='lato'>blue text</font> and non-blue text</b></span>">
    </
    HtmlView>

    Demonstration project using the above snippet can be found here.
    If you need an Angular example you can find one here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. Anurag
    Anurag avatar
    27 posts
    Member since:
    Apr 2016

    Posted 24 Aug Link to this post

    Hi Nikolay,

    Thanks for the prompt response. Missing the closing > for the HtmlView was an oversight. My apologies.

    I have a nativescript angular project and I tried to use the code that you posted in the response in my project. In android the only styling option that worked was the color and neither the font size nor the font face change on applying the styles as suggested.

    I was able to observe this behavior in multiple angular nativescript projects. If it would help I can create and share a project on github. Do let me know..

    Thanks

  4. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 24 Aug Link to this post

    Hello Anurag,

    The HTML view module is meant for the most basic scenarios (like providing HTML string) and only a number of styling properties like color will be applied.
    To resolve this issue and have better control over your HTML content, you should use the WebView module.
    Apart from providing URL, you can also pass HTML string for your WebView just as you would do with HTML View. The property that needs to handle the HTML string is called src.

    e.g.
    <WebView src="<span><b><font size='24' color='blue' face='lato'>blue text</font> and non-blue text</b></span>"></WebView>
    Demo Angular project demonstrating the above code can be found here
    With the WebView the font properties will be applied as expected.

    More examples on how to use WebView module can be found here.

    Regards,
    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top