flutter_widget_from_html
flutter_widget_from_html copied to clipboard
<ul> and <li> tags cant be styled using customStylesBuilder
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
I also encountered the same problem. Setting {"list style type": "none"} does not work
Confirmed, list-style-type: none is not yet supported. Let me see what can be done.
v0.9.1 has been released with support for this. Please try upgrading and see whether it works in your app.