flutter_widget_from_html icon indicating copy to clipboard operation
flutter_widget_from_html copied to clipboard

<ul> and <li> tags cant be styled using customStylesBuilder

Open JulianBissekkou opened this issue 3 years ago • 1 comments

Steps to Reproduce

HTML
    <div>

<p>Some other text.</p>

<p>This is a list:</p>
<ul>
<li> Point 1</li>
<li> Point 2</li>
<li> Point 1</li>
</ul>
</div>
`HtmlWidget` configuration
Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: HtmlWidget(
            html,
            customStylesBuilder: (element) {
              if (element.localName == "ul") {
                return {"list-style-type": "none"};
              }
              return null;
            },
          ),
        ),
      ),
    );
Tesing environment
[✓] Flutter (Channel stable, 3.0.0, on macOS 12.4 21F79 darwin-arm (Rosetta), locale en-DE)
    • Flutter version 3.0.0 at /SomePath/fvm/versions/3.0.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ee4e09cce0 (4 months ago), 2022-05-09 16:45:18 -0700
    • Engine revision d1b9a6938a
    • Dart version 2.17.0
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /SomePath/Library/Android/sdk
    • Platform android-33, build-tools 30.0.3
    • Java binary at: /SomePath/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8139111/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /SomePath/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/211.7628.21.2111.8139111/Android Studio.app/Contents
    • 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.11+0-b60-7772763)

[✓] Android Studio (version 2020.3)
    • Android Studio at /SomePath/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/203.7935034/Android Studio.app/Contents
    • 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)

[✓] IntelliJ IDEA Community Edition (version 2021.3.2)
    • IntelliJ at SomePath/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/213.6777.52/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • iPhone 11 Pro Max (mobile) • XXXXXXXX • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-0 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 12.4 21F79 darwin-arm (Rosetta)
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

Expected results

In my example I set the list style to none, but the dots are still visible.

Actual results

The dots should not be visible because I turned them off in the custom css

JulianBissekkou avatar Aug 29 '22 06:08 JulianBissekkou

I also encountered the same problem. Setting {"list style type": "none"} does not work

2530442368 avatar Sep 26 '22 07:09 2530442368

Confirmed, list-style-type: none is not yet supported. Let me see what can be done.

daohoangson avatar Dec 26 '22 02:12 daohoangson

v0.9.1 has been released with support for this. Please try upgrading and see whether it works in your app.

daohoangson avatar Jan 09 '23 03:01 daohoangson