Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Borders on table cells are applied to underlying text #1199

Closed
AsturaPhoenix opened this issue Dec 1, 2022 · 1 comment · Fixed by #1176
Closed

[BUG] Borders on table cells are applied to underlying text #1199

AsturaPhoenix opened this issue Dec 1, 2022 · 1 comment · Fixed by #1176
Labels
bug Something isn't working <table> Issues with table rendering
Milestone

Comments

@AsturaPhoenix
Copy link

AsturaPhoenix commented Dec 1, 2022

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

style: child.style, //TODO updated this. Does it work?

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:

  • Flutter 3.6.0-1.0.pre.3
  • Dart SDK version: 2.19.0-377.0.dev
  • flutter_html: ^3.0.0-alpha.6
  • flutter_html_table: ^3.0.0-alpha.4

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

@AsturaPhoenix AsturaPhoenix added the bug Something isn't working label Dec 1, 2022
@Sub6Resources
Copy link
Owner

#1176 will fix this. Thanks for reporting!

@Sub6Resources Sub6Resources added the <table> Issues with table rendering label May 9, 2023
@Sub6Resources Sub6Resources added this to the 3.0.0 milestone May 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working <table> Issues with table rendering
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants