locked
[UWP][C#][HTML] Webview displays text smaller in li and table HTML tags RRS feed

  • Question

  • Hi

    I'm using the Webview control but I have noticed it does not display the text size correctly if the text is in lists (li) and in tables (table) HTML tags. I can use css font-size:300% to resize it but is there a proper solution?

    Below is a simple html file to reproduce the problem:

    <!DOCTYPE html>
    
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <p>This is normal size text</p>
        <p>Lists:<p>
            <ul>
                <li>This text is too small</li>
            </ul>
            <ol>
                <li>This text is too small too.</li>
            </ol>
        <p>Table:<p>
            <table>
                <tbody>
                    <tr>
                        <td>Text in table is too small too!</td>
                    </tr>
                    <tr>
                        <td style="font-size: 300%;">This is the correct size, after using font-size:300%.</td>
                    </tr>
                </tbody>
            </table>
    
    
    </body>
    </html>
    Below is a screenshot from the Windows Phone emulator:





    • Edited by FishInPond Monday, July 25, 2016 12:45 PM
    Saturday, July 23, 2016 11:26 PM

All replies

  • Hello binaryfish,

    Welcome to the Developing Universal Windows apps forum! 

    Please read the sticky posts, especially the Guide to posting: subject line tags and Known Issues for Windows 10 SDK and Tools .

    Can you show us your project type by edit your title first.

    Then how you load the above html in your webview? Use navigate to URI or navigate to string? I will try reproduce this issue first so I need more details.

    Best regards

    Barry


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Monday, July 25, 2016 10:58 AM
  • Hi

    I updated the title.

    I have a xaml page with a Webview control named WvwMain. In the OnNavigatedTo function I have this line:

    WvwMain.Navigate(new Uri("ms-appx-web:///Assets/help/contents.html"));

    contents.html contains the html file above.

    I also just tested it on Windows 10 and the html is rendered correctly. It is in Windows 10 Mobile that it is not rendering correctly.

    • Edited by FishInPond Monday, July 25, 2016 11:59 AM
    Monday, July 25, 2016 11:16 AM
  • Hi,

    I have exactly the same problem, is quite annoying, any solution?

    thanks

    Wednesday, July 27, 2016 8:46 AM
  • Hello all,

    As a solution maybe you can check the following SO thread:

    http://stackoverflow.com/questions/36366875/ms-text-size-adjustauto-not-working-on-list-in-webview

    <!DOCTYPE html>
    <html>
    <head>
    <style>html { -ms-text-size-adjust:auto;  }  ol, ul { padding:0;} body{background:white;color:black;font-family:'Segoe UI';font-size:14pt;margin:0;padding:0;display: block;}}
    </style>
    </head>
    <body><ul><li><div>Some Text</div></li></ul>
    </body>
    </html>

    I've tested it which works for <li> tag. But not in <td>

    Best regards,

    Barry


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, July 28, 2016 7:17 AM
  • Thanks Barry but what different is it from me just using Font-size 300%. The problem is not just ol and ul, so far I have also found problems with img, table, th. The font size is not rendering correctly for all those html tags.
    Thursday, July 28, 2016 2:52 PM
  • Thanks Barry but what different is it from me just using Font-size 300%. The problem is not just ol and ul, so far I have also found problems with img, table, th. The font size is not rendering correctly for all those html tags.

    I founf problems also in the following cases, I had to replace the html programmatically

     body = body.Replace("<p style=\"margin-left: 80px;\">", "<p style=\"margin-left: 80px; font-family: 'Arial'; font-size: 16px\">");
     body = body.Replace("<p style=\"margin-left: 120px;\">", "<p style=\"margin-left: 120px; font-family: 'Arial'; font-size: 16px\">");
     
    


    • Edited by emiliano84 Thursday, October 13, 2016 11:14 AM
    Thursday, October 13, 2016 11:14 AM
  • The problem with that solution is the bullets or numbers are not shown in the lists when the padding is set to 0.

    Michael S. Scherotter Media Experience Evangelist Microsoft Corporation http://blogs.msdn.com/synergist

    Wednesday, January 11, 2017 5:04 PM