flutter_html
flutter_html copied to clipboard
Sub6Resources
[BUG] list marker alignment broken when setting lineHeight
Describe the bug: Setting lineHeight on "li" element breaks alignment of list marker for both "ol" and "ul".
HTML to reproduce the issue:
<ol>
<li>The dot displayed at the list item</li>
<li>will be displayed above the middle line</li>
<li>when setting styles "li" to lineHeight: LineHeight.em(1.3)</li>
</ol>
<ul>
<li>The number displayed at the list item</li>
<li>will be displayed above the middle line</li>
<li>when setting styles "li" to lineHeight: LineHeight.em(1.3)</li>
</ul>
Html widget configuration:
final styles = <String, Style>{
'body': Style(
lineHeight: LineHeight.em(1.3), // does not matter where you set lineHeight
),
'ul': Style(
lineHeight: LineHeight.em(1.3), // does not matter where you set lineHeight
),
'ol': Style(
lineHeight: LineHeight.em(1.3), // does not matter where you set lineHeight
),
'li': Style(
lineHeight: LineHeight.em(1.3), // does not matter where you set lineHeight
),
}
Expected behavior: List item markers should be aligned with the text inside the list item.
Screenshots:
Device details and Flutter/Dart/flutter_html versions:
flutter_html: 2.2.1 (latest at the moment)
flutter: 2.10.1 (stable)
dart: 2.16.1 (comes with flutter)
Additional info: Checked the source code, looks like a Row layout with a Text element is created, maybe consider using the textStyle from the list item or allow a custom text style. There is a workarround for "ul" by using "listStyleType: ListStyleType.fromWidget(...)" with some margin on top, but it does not work for "ol" as one cannot provide the numbers dynamically.
A picture of a cute animal (not mandatory but encouraged)
A list of perfectly aligned cats 😺
