Support for colspan and column sizing

Kraakhoofd commented 4 years ago

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.

daohoangson commented 4 years ago

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.

Kraakhoofd commented 4 years ago

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!

daohoangson commented 4 years ago

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 commented 4 years ago

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

swoon-lq commented 4 years ago

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

daohoangson commented 4 years ago

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 = """

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

"""; ```

swoon-lq commented 4 years ago

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 :


   <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>&nbsp;</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:mail@mail.com'>mail@mail.com</a></td>
            </tr>
            <tr></tr>
            <td>&nbsp;</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='' >&nbsp;</td>
            </tr>
            <tr></tr>
            <td>&nbsp;</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:mail@gmail.com'>mail@gmail.com</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>&nbsp;</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>```

daohoangson commented 4 years ago

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 commented 4 years ago

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.

Please try upgrading and let me know if it works for you. Sorry it took longer than I expected.

swoon-lq commented 4 years ago

It's working perfectly, thanks you very much !

daohoangson commented 4 years ago

There is still some rough edges, hopefully they will be ironed out soon. I'm glad that it's good enough for you.

daohoangson / flutter_widget_from_html

Support for colspan and column sizing #129