Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.79k stars 860 forks source link

[BUG] Default indentation in customRender/extensions for List Rendering #1310

Closed tobiasht closed 1 year ago

tobiasht commented 1 year ago

Describe the bug: I am currently utilizing the customRender/extensions feature to render a list in my mobile application, because the default indentation level is too large for mobile devices, impacting the overall user experience. To address this, I have attempted to use extensions to modify the indentation, but the content is still indented. I am unsure whether this behavior is intentional or not. If it is intentional, I would appreciate guidance on how to disable or modify the indentation to better suit mobile devices.

HTML to reproduce the issue:

Html(
  data: """<ul>
          <li>List element 1</li>
          <li>List element 2</li>
          <li>List element 3</li>
          <li>List element 4</li>
        </ul>""",
  extensions: [
    TagExtension(
      tagsToExtend: {"li"},
      builder: (extensionContext) {
        return TagExtension(
          tagsToExtend: {"li"},
          builder: (extensionContext) {
            return Container(
              color: Colors.red,
              child: Row(
                children: [
                  Text("- ${extensionContext.element!.text}"),
                ],
              ),
            );
          },
        ),
      },
    ),
  ],
),

Expected behavior: Not be indented

Screenshots:

image

Device details and Flutter/Dart/flutter_html versions: flutter_html: ^3.0.0-beta.2 flutter: 3.7.12 (and 3.10.4)

Stacktrace/Logcat

Additional info:

Sub6Resources commented 1 year ago

You can either set padding-inline-start in css, or paddings -> inlineStart in the style configuration on the ul element to adjust the indentation of list items.

tobiasht commented 1 year ago

Thank you!

Html(
  style: {
    'ul': Style(
      padding: HtmlPaddings(inlineStart: HtmlPadding(3)),
      backgroundColor: Colors.red,
    )
  },
  ...
)