[BUG] <ol> or <ul> size is broken.

[princeteck]

Below is my code block.

Widget stepsHtmlWidget = Html(
      data: htmlData,
      style: {
        "ol": Style(
          direction: TextDirection.ltr,
          padding: EdgeInsets.zero,
          fontSize: FontSize.small,
        ),
        "li": Style(
          fontSize: FontSize.large,
          textAlign: TextAlign.start,
          lineHeight: const LineHeight(1.5),
          padding: EdgeInsets.zero,
        ),
        "div": Style(
          alignment: Alignment.centerLeft,
          margin: const EdgeInsets.only(right: Dimens.px10),
          padding: EdgeInsets.zero,
        )
      },
    );

Describe the bug:

Issue is that all the ol or ul tags have a bigger font style and the one I am providing manually is not working.

HTML to reproduce the issue:

Html widget configuration:

style: {
        "ol": Style(
          direction: TextDirection.ltr,
          padding: EdgeInsets.zero,
          fontSize: FontSize.small,
        ),

Expected behavior:

Screenshots:

Device details and Flutter/Dart/flutter_html versions:

flutter doctor -v
[√] Flutter (Channel stable, 2.5.2, on Microsoft Windows [Version 10.0.19044.1466],
    locale en-IN)
    • Flutter version 2.5.2 at C:\Users\yuvra\fvm\default
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 3595343e20 (4 months ago), 2021-09-30 12:58:18 -0700
    • Engine revision 6ac856380f
    • Dart version 2.14.3

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at C:\Users\yuvra\AppData\Local\Android\sdk
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code, 64-bit edition (version 1.63.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.32.0

[√] Connected device (4 available)
    • V2027 (mobile)          • 35588b33      • android-arm64  • Android 10 (API 29)     
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30)     
      (emulator)
    • Chrome (web)            • chrome        • web-javascript • Google Chrome
      97.0.4692.71
    • Edge (web)              • edge          • web-javascript • Microsoft Edge
      97.0.1072.55

• No issues found!

Stacktrace/Logcat

Additional info:

A picture of a cute animal (not mandatory but encouraged)

[AndRud]

I have the same problem. Ol and ul tags don't fit the text size and don't vertically aligned.

[erickok]

Which version of flutter_html are you using? We made several changes/bugs/fixes...

[AndRud]

Which version of flutter_html are you using? We made several changes/bugs/fixes...

I'm using flutter_html: ^2.2.1

[UserSense]

Issue also exists in 3.0.0-alpha.2

Used HTML:

<ul>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
</ul>
<ol>
<li>Regel 1</li>
<li>Regel 2</li>
<li>Regel 3</li>
<li>Regel 4</li>
</ol>

Rendering without additional styling:

In both cases a larger fontsize seems to be used for the leading dot or number.

[olegyablokov]

Is there a way to fix this in 2.2.1, for example, providing a style to ol, ul or li elements (which didn't work for me)?

[Sub6Resources]

@olegyablokov No, unfortunately the fix relies on a major restructure made possible in 3.0.0.