Flutter_widget_from_html: Support for colspan and column sizing

Created on 17 Jan 2020 · 11Comments · Source: daohoangson/flutter_widget_from_html

Currently the colspan attribute is not respected

Minimal example:

This is a 2 column spanning text
A short text	A short text2

Also, tables tend to span the full x-width.
When loading the same html code in flutter webview, the tables do not span the whole x-width, as expected.

question

Source

Kraakhoofd

All 11 comments

I wanted to supported bot colspan and rowspan but it appeared to be quite complicated so they are skipped for now. I will check back and see what can be done.

daohoangson on 23 Feb 2020

👍1

For my use case, I fixed it by using your plugin for showing HTML, but wrote separate code for HTML tables.
I basically wrote some code to extract the rows and cells (with colspan, I don't use rowspan) from the HTML table. I used the css_text plugin to display the contents of each cell. Then I placed the cell widgets with their colspan using the plugin flutter_layout_grid, which allows you to use exact x,y placement and define col- and rowspan. Maybe this can help you too!

Kraakhoofd on 23 Mar 2020

Thanks for the tip @Kraakhoofd. The tricky part was indeed the grid layout, I wanted to avoid package for core feature like this but this seems to be too hard. I will expore the flutter_layout_grid for inspiration.

daohoangson on 23 Mar 2020

Version 0.5.0-rc.2020071301 has been released with support for colspan / rowspan. Please try upgrading and see whether it works for you.

daohoangson on 13 Jul 2020

Hello, I've upgraded to version 0.5.0-rc.2020071301 and the colspan is still not working for me.

swoon-lq on 14 Aug 2020

What is your HTML? I have just retested with your minimal input and it seemed to work.

test.dart

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(title: Text('Issue 129')),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: SingleChildScrollView(
            child: HtmlWidget(kHtml),
          ),
        ),
      );
}

const kHtml = """
<table border="1">
<tr><td colspan="2">This is a 2 column spanning text</td></tr>
<tr><td>A short text</td><td>A short text2</td></tr>
</table>
""";

daohoangson on 14 Aug 2020

I was using the core package and I saw you writing in another issue that the colspan is currently not fixed in the core package.
I then switched to the flutter_widget_from_html package and my issue is different (renderlayout builder issue so I guess it's more related to #256)

My HTML is :
<html> <head> </head> <body> <div> <table> <colgroup> <col style='width:250px;'> <col style='width:300px;'> </colgroup> <tr> <td style='font-size:13px;position: relative;line-height: 150%;;background-color:#FFFFFF;height:16px;' class='' colspan='3'> <div style='position:relative;margin-left:3px;'> <div style=''>TEST ABOVE ALL TITLE</div> </div> </td> </tr> <tr></tr> <td> </td> <tr> <td style='font-size:13px;position: relative;line-height: 150%;background:#883333;color:#ffffff;border-top:1px solid #660000;border-right:1px solid #660000;border-bottom:1px solid #660000;border-left:1px solid #660000;height:16px;' class='' colspan='2'> <div style='position:relative;margin-left:3px;'> <div style=''>User Informations</div> </div> </td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >ID</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >11</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >SURNAME</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >FamilyName</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >NAME</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >FirstName </td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >AGE</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >40</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >COUNTRY</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >●●●●●●enie</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >CITY</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >Somewhere</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >ADRESS</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' >loin d'ici</td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;background-color:#8e3535;color:#FFFFFF;border-left:1px solid #660000;border-bottom:1px solid #660000;border-top:1px solid #660000;border-right:1px solid #660000;height:28px;' class='' >MAIL</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;border-left:1px solid #403f3f;border-bottom:1px solid #403f3f;border-top:1px solid #403f3f;border-right:1px solid #403f3f;;' class='' ><a href='mailto:[email protected]'>[email protected]</a></td> </tr> <tr></tr> <td> </td> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;height:28px;' class='' >Title</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;;' class='' > </td> </tr> <tr></tr> <td> </td> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;height:28px;' class='' >email</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;;' class='' ><a href='mailto:[email protected]'>[email protected]</a></td> </tr> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;height:28px;' class='' >List</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;;' class='' > <ol class="R_ol" style="list-style-type:decimal"> <li class="R_li">I <br></li> <li class="R_li">spend<br></li> </ol> <br> </td> </tr> <tr></tr> <td> </td> <tr> <td style='font-size:13px;text-align:right;color:#888888;background:#F5F5F5;line-height: 150%;padding:2px 6px 0px 6px;;height:28px;' class='' >Multiple Select</td> <td style='font-size:13px;padding:2px 6px 0px 6px;line-height: 150%;;;' class='' >ta, en</td> </tr> </table> </div> </body> </html>

swoon-lq on 14 Aug 2020

Ah yes. I'll cut a new pre-release with the fix for you to test. Sorry for the inconvenience, it should be up in a few hours.

daohoangson on 14 Aug 2020

The latest 0.5 release v0.5.0-rc.2020081901 now renders your HTML without issue. Some of the text is cutoff because you have a hard coded height: xxx inline style in there.