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] Borders on table cells are applied to underlying text #1199

Closed AsturaPhoenix closed 1 year ago

AsturaPhoenix commented 1 year ago

Describe the bug:

Borders on table cells are unexpectedly inherited by underlying text. I suspect this is a regression as #1037 shows borders rendering as expected. I did not find a workaround by playing with styles, but this seems correctable by changing https://github.com/Sub6Resources/flutter_html/blob/c75e0dfb1be6cb79748f719487043d12bc330c60/packages/flutter_html_table/lib/flutter_html_table.dart#L120 to only apply the inherited styles to the child:

                  style: child.style.copyOnlyInherited(
                      Style()), //TODO updated this. Does it work?

HTML to reproduce the issue:

This repros with the table provided in #1037 and also with the following HTML (abridged for brevity).

<table class='details_table'>
<tbody>
<tr class='about_line1'><td class='about_col1' valign=top>Name</td><td valign=top><font face="monospace">Point Chauncey, 1.3 mi east of (depth 7 ft), San Francisco Bay, California Current</font></td></td>
<tr><td class='about_col1' valign=top>In file</td><td valign=top><font face="monospace">harmonics-dwf-20210110-free.tcd</font></td></td>
<tr><td class='about_col1' valign=top>Station ID context</td><td valign=top><font face="monospace">NOS</font></td></td>
<tr><td class='about_col1' valign=top>Station ID</td><td valign=top><font face="monospace">SFB1309_11</font></td></td>
<tr><td class='about_col1' valign=top>Date imported</td><td valign=top><font face="monospace">2021-01-05</font></td></td>
</tbody></table>

Html widget configuration:

              Html(
                data: snapshot.data,
                style: {
                  'table': Style(
                    backgroundColor: const Color(0xffcbdcff),
                  ),
                  'td': Style(
                    border: Border.all(),
                    padding:
                        const EdgeInsets.symmetric(vertical: 0, horizontal: 2),
                  ),
                  '.about_col1': Style(
                    alignment: Alignment.topCenter,
                    fontWeight: FontWeight.bold,
                  ),
                },
                customRenders: {tableMatcher(): tableRender()},
              )

To repro with #1037, the style section can be commented out.

Expected behavior:

CSS border style shouldn't be inherited, so text spans shouldn't receive their own borders.

Screenshots:

At master:

image

With the patch to only apply inherited styles to cell children:

image

What the table in #1037 looks like at master:

image

With patch:

image

Device details and Flutter/Dart/flutter_html versions:

Additional info: Let me know if you want a pull request for this line, though guidance towards finding/adding a pertinent test would be appreciated. Totally understand if there's a better way to fix this though.

A picture of a cute animal (not mandatory but encouraged)

image

Sub6Resources commented 1 year ago

1176 will fix this. Thanks for reporting!