Skip to content

[BUG] List with list-style-position: inside; and block child collapses margins incorrectly #1160

Open
@Sub6Resources

Description

@Sub6Resources

Working on resolving other list issues and documenting an issue that seems good to fix but that I won't devote resources to immediately:

Describe the bug:

See title. Issue is specifically that in a list item with an inline marker box, the margin of a block child collapses to before the marker box. It shouldn't collapse at all in this case.

HTML to reproduce the issue:

<html>
<head>
    <style>
      li {
        list-style-position: inside;
      }
    </style>
</head>
<body>
<div>
    <ul>
        <li>Hello</li>
        <li><p>
            Line break?
        </p></li>
        <li>No line break</li>
        <li>World!</li>
    </ul>
</div>
</body>
</html>

Html widget configuration:

Html(
  data: htmlData, //See above
),

Expected behavior:

Screen Shot 2022-10-08 at 2 01 44 PM

Actual behavior:

Screen Shot 2022-10-08 at 2 02 11 PM

Device details and Flutter/Dart/flutter_html versions:

Currently on working branch fix/lists.

Metadata

Metadata

Assignees

Labels

bugSomething isn't workinglistsIssues with <ol>, <ul>, and <li>low-priority

Projects

Status

Todo

Relationships

None yet

Development

No branches or pull requests

Issue actions