search

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] Elements are not coming in single line, display: flex/inline-block/... not working #1183

Closed yashwp closed 1 year ago

yashwp commented 1 year ago

Describe the bug: I'm trying to render a UI based on HTML through this package. But apparently the elements are coming below one and another only, but if I wanted to make them adjacent using display: flex/inline-block they are not working. Also, somehow for elements with display: block the width CSS property is also not working.

HTML to reproduce the issue:

  <section>
  <div style="margin-bottom: 32px">
    <h2 style="margin-top: 0; margin-bottom: 8px; font-size: 24px; color: #232323">
      Your overall asset is split between debt, equity, gold and US equity
    </h2>
  </div>
  <div style="background-color: #faf9fb;padding-bottom: 16px;margin-bottom: 24px;">
    <div style="display: flex">
      <div style="background-color: #A28CFE; height: 2px; width: 867.5540297163441%">&nbsp;</div>
      <div style="background-color: #FEAB8C; height: 2px; width: 517.1431787483116%">&nbsp;</div>
      <div style="background-color: #FECE8C; height: 2px; width: 100%">&nbsp;</div>
    </div>
    <div style="display: flex; padding: 16px;width: 100%";>
      <div style="display: flex; margin-right: 24px";>
        <div style="width: 15px;height: 15px;background-color: #A28CFE;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Debt
          <div style="color: #6b677e; font-size: 12px">867.5540297163441%</div>
        </div>
      </div>
      <div style="display: flex; margin-right: 24px";>
        <div style="width: 15px;height: 15px;background-color: #FEAB8C;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Equity
          <div style="color: #6b677e; font-size: 12px">517.1431787483116%</div>
        </div>
      </div>
      <div style="display: flex; margin-right: 24px";>
        <div style="width: 15px;height: 15px;background-color: #FECE8C;">&nbsp;</div>
        <div style="font-size: 14px;font-weight: 500;color: #2c2747;margin-left: 8px;">
          Gold
          <div style="color: #6b677e; font-size: 12px">100%</div>
        </div>
      </div>
    </div>
  </div>
</section>

Html widget configuration: Html(data: page.html)

Expected behavior:

image

Screenshots:

image

Device details and Flutter/Dart/flutter_html versions:

Flutter 2.10.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 097d3313d8 (8 months ago) • 2022-02-18 19:33:08 -0600
Engine • revision a83ed0e5e3
Tools • Dart 2.16.1 • DevTools 2.9.2

flutter_html_all: ^3.0.0-alpha.5

Stacktrace/Logcat No error is coming

Sub6Resources commented 1 year ago

display: flex is definitely not supported. Have you tried this in ^3.0.0-alpha.6? Better support for the width property was added in that prerelease version (although there are a few text scaling bugs that will be fixed in 3.0.0-alpha.7).