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] `ListStyleType.none` reverts list numbering to digits #1322

Closed kwado-tech closed 1 year ago

kwado-tech commented 1 year ago

Describe the bug: Applying ListStyleType.none to html style does not remove the list indication but converts it to digits.

HTML to reproduce the issue:

<ul>
  <li>
    <div class="image" style="background-image: url(&quot;https://sportsbet.imgix.net/Agents/logo-dmcreditos-novo2.png&quot;);"></div>
    <div class="text">
      <h4>DM Créditos</h4>
      <p>Usuário: <span>DMcreditos</span></p>
      <p>WhatsApp: <span><a href="https://wa.me/+5531984723490" target="_blank">(31) 98472-3490</a></span></p>
      <p>Site: <a href="https://dmcreditos.com.br/" target="_blank">www.dmcreditos.com.br</a></p>
    </div>
  </li>
  <li>
    <div class="image" style="background-image: url(&quot;https://sportsbet.imgix.net/Agents/logo-dmcreditos-novo2.png&quot;);"></div>
    <div class="text">
      <h4>DM Créditos</h4>
      <p>Usuário: <span>DMcreditos</span></p>
      <p>WhatsApp: <span><a href="https://wa.me/+5531984723490" target="_blank">(31) 98472-3490</a></span></p>
      <p>Site: <a href="https://dmcreditos.com.br/" target="_blank">www.dmcreditos.com.br</a></p>
    </div>
  </li>
  <!-- Rest of the list items -->
</ul>

Html widget configuration:

return Html(
  data: '''
    <ul>
      <li>
        <div class="image" style="background-image: url(&quot;https://sportsbet.imgix.net/Agents/logo-dmcreditos-novo2.png&quot;);"></div>
        <div class="text">
          <h4>DM Créditos</h4>
          <p>Usuário: <span>DMcreditos</span></p>
          <p>WhatsApp: <span><a href="https://wa.me/+5531984723490" target="_blank">(31) 98472-3490</a></span></p>
          <p>Site: <a href="https://dmcreditos.com.br/" target="_blank">www.dmcreditos.com.br</a></p>
        </div>
      </li>
      <li>
        <div class="image" style="background-image: url(&quot;https://sportsbet.imgix.net/Agents/logo-dmcreditos-novo2.png&quot;);"></div>
        <div class="text">
          <h4>DM Créditos</h4>
          <p>Usuário: <span>DMcreditos</span></p>
          <p>WhatsApp: <span><a href="https://wa.me/+5531984723490" target="_blank">(31) 98472-3490</a></span></p>
          <p>Site: <a href="https://dmcreditos.com.br/" target="_blank">www.dmcreditos.com.br</a></p>
        </div>
      </li>
      <!-- Rest of the list items -->
    </ul>
  ''',
  style: Style.fromCss('''
    li {
        list-style-type: none;
        padding-left: 0;
      }

      ul li {
          list-style-type: none;
        margin-left: 0;
      }

    .image {
      width: 50px;
      height: 50px;
      background-size: cover;
      background-position: center;
      display: inline-block;
      vertical-align: middle;
    }
''', (css, errors) => errors.toString()),
  onLinkTap: (String? url, _, __) {
    if (url != null) {
      UrlLauncherUtil.launchUrl(uri: Uri.parse(url));
    }
  },
);

Expected behavior: Applying ListStyleType.none to a html string with ul or ol tags, should remove its list indication (numbering). The expected behaviour is noticed in flutter_html: 3.0.0-alpha.3.

Screenshots: Simulator Screenshot - iPhone 14 Pro Max - 2023-06-20 at 11 20 22

Device details and Flutter/Dart/flutter_html versions:

kwado-tech commented 1 year ago

I was able to make this work by using the following styles

ul {
  list-style-type: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

This does not resolve the actual bug