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] Table breaking after upgrading to 3.0.0 #1131

Closed shinayser closed 2 years ago

shinayser commented 2 years ago

We were using flutter_html version 2.2.1 and everything was working fine. This screenshot exemplifies it: image

But after upgrading to 3.0.0, the table section seems to be broken:

image

This is the html being returned by our server:

<p><span style="font-weight: 400;">O seu cartão </span><strong>iF
        ood Benefícios</strong><span style="font-weight: 400;"> é bandeira
    </span><strong>Elo</strong><span style="font-weight: 400;">, você
        consegue comprar na função crédito à vista em diversos mercados d
        o Brasil, entre eles:<br></span></p>
<table style="width: 419px;">
    <thead>
        <tr style="height: 44px;">
            <th style="height: 44px; width
: 201.562px;">
                <p><span class="wysiwyg-font-size-medium"><strong>R
                            egião Sul</strong></span></p>
            </th>
            <th style="height: 44px; width
: 210.438px;">
                <p><span class="wysiwyg-font-size-medium"><strong>R
                            egião sudeste </strong></span></p>
            </th>
        </tr>
    </thead>
    <tbody>
        <t r style="height: 22px;">
            <td style="height: 66px; width: 193.562px
;">
                <p><span class="wysiwyg-font-size-medium" style="font-weight: 
400;">Muffato </span></p>
            </td>
            <td style="height: 66px; width: 20
2.438px;">
                <p><span class="wysiwyg-font-size-medium" style="font-w
eight: 400;">Assaí <br>Atacadista</span></p>
            </td>
            </tr>
            <tr style="height: 44px;">
                <td style="height: 84px; width: 193.562px;">
                    <p>
                        <span class="wysiwyg-font-size-medium" style="font-weight: 400;">A
                            ssaí <br>Atacadista </span>
                    </p>
                </td>
                <td style="height: 84px; wid
th: 202.438px;">
                    <p><span class="wysiwyg-font-size-medium" style="
font-weight: 400;">Supermercado <br>porecatu </span></p>
                </td>
        </t r>
        <tr style="height: 44px;">
            <td style="height: 77px; width: 193.
562px;">
                <p><span class="wysiwyg-font-size-medium" style="font-wei
ght: 400;">Comercial <br>Zaffari </span></p>
            </td>
            <td style="heig
ht: 77px; width: 202.438px;">
                <p><span class="wysiwyg-font-size-me
dium" style="font-weight: 400;">Supermercado <br>Guanabara </span>
                </p>
            </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 63p
x; width: 193.562px;">
                <p><span class="wysiwyg-font-size-medium" s tyle="font-weight: 400;">Carrefour  </span></p>
            </td>
            <td style="h
eight: 63px; width: 202.438px;">
                <p><span class="wysiwyg-font-size
-medium" style="font-weight: 400;">Supermercados <br>BH </span></p>
            </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 67px; 
width: 193.562px;">
                <p><span class="wysiwyg-font-size-medium" styl e="font-weight: 400;">Supermercado <br>Guanabara </span>
                </p>
            </td>
            <td style="height: 67px; width: 202.438px;">
                <p><span class="wysi
wyg-font-size-medium" style="font-weight: 400;">Carrefour </span>
                    < /p>
            </td>
        </tr>
    </tbody>
</table>
<p> </p>
<table style="width: 41
4px; height: 286px;">
    <thead>
        <tr style="height: 44px;">
            <th style="height: 44px; width: 410px;">
                <p><span class="wysiwyg-font-size-
medium"><strong>Região centro-oeste </strong></span></p>
            </th>
            </t r>
    </thead>
    <tbody>
        <tr style="height: 22px;">
            <td style="height: 
47px; width: 402px;">
                <p><span class="wysiwyg-font-size-medium" st yle="font-weight: 400;">Assaí Atacadista</span></p>
            </td>
        </tr>
        <t r style="height: 44px;">
            <td style="height: 52px; width: 402px;">
                <p><span class="wysiwyg-font-size-medium" style="font-weight: 400;
">Extra </span></p>
            </td>
            </tr>
            <tr style="height: 44px;">
                <td sty le="height: 46px; width: 402px;">
                    <p><span class="wysiwyg-font-siz
e-medium" style="font-weight: 400;">Bretas </span></p>
                </td>
            </tr>
            <tr style="height: 44px;">
                <td style="height: 46px; width: 402px;
">
                    <p><span class="wysiwyg-font-size-medium" style="font-weight: 4
00;">Carrefour </span></p>
                </td>
            </tr>
            <tr style="height: 44px;">
                <td style="height: 51px; width: 402px;">
                    <p><span class="wysiwyg-f
ont-size-medium" style="font-weight: 400;">Supermercado Guanabara< /span>
                    </p>
                </td>
            </tr>
    </tbody>
</table>
<p> </p>
<table style="wi
dth: 412px; height: 386px;">
    <thead>
        <tr style="height: 44px;">
            <t h style="height: 44px; width: 200.688px;">
                <p><span class="wysiwyg
-font-size-medium"><strong>Região Nordeste </strong></span></p>
                </ th>
                <th style="height: 44px; width: 204.312px;">
                    <p><span class="w
ysiwyg-font-size-medium"><strong>Região Norte </strong></span></p>
                </th>
        </tr>
    </thead>
    <tbody>
        <tr style="height: 22px;">
            <td style="height: 75px; width: 192.688px;">
                <p><span class="wysiwyg-font-s
ize-medium" style="font-weight: 400;">Assaí <br>Atacadista</span>
                    < /p>
            </td>
            <td style="height: 75px; width: 196.312px;">
                <p><span cl ass="wysiwyg-font-size-medium" style="font-weight: 400;">Assaí <br>Atacadista</span></p>
            </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 84px; width: 192.688px;">
                <p><span class="wysiwyg-f
ont-size-medium" style="font-weight: 400;">Novo <br>Atacarejo </sp an>
                </p>
            </td>
            <td style="height: 84px; width: 196.312px;">
                <p>
                    <spa n class="wysiwyg-font-size-medium" style="font-weight: 400;">Carre
                        four </span>
                </p>
            </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 60px; width: 192.688px;">
                <p><span class="wysiwyg-font-si
ze-medium" style="font-weight: 400;">Carrefour </span></p>
            </td>
            < td style="height: 60px; width: 196.312px;">
                <p><span class="wysiwy
g-font-size-medium" style="font-weight: 400;">Extra Hiper </span>
                    < /p>
                        </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 72px
; width: 192.688px;">
                <p><span class="wysiwyg-font-size-medium" st yle="font-weight: 400;">Mateus <br>Supermercados</span></p>
            </td>
            <td style="height: 72px; width: 196.312px;">
                <p><span class="wysiw
yg-font-size-medium" style="font-weight: 400;">Mateus <br>Supermer
                        cados</span></p>
            </td>
        </tr>
        <tr style="height: 44px;">
            <td style="height: 51px; width: 192.688px;">
                <p><span class="wysiwyg-font-si
ze-medium" style="font-weight: 400;">Extra</span></p>
            </td>
            <td st yle="height: 51px; width: 196.312px;">
                <p><span class="wysiwyg-fon
t-size-medium" style="font-weight: 400;">Extr</span><span class="w
ysiwyg-font-size-medium" style="font-weight: 400;">a</span></p>
                </ td>
        </tr>
    </tbody>
</table>
<p> </p>
<p><span style="font-weight: 
400;">- </span><strong>E em mais de 4 milhões de estabelecimentos< /strong><span style="font-weight: 400;"> </span></p>
<p><span styl e="font-weight: 400;">Importante:  pode acontecer de algumas unida
        des exclusivas dos mercados acima não aceitarem o iFood Benefícios
        como forma de pagamento, nesse caso <a href="https://ifoodbenefic
ios.zendesk.com/hc/pt-br/requests/new?ticket_form_id=6329062775835
"><strong>clique aqui</strong></a></span><span style="font-weight:
 400;"> e nos informe os dados do estabelecimento, </span><span st yle="font-weight: 400;">pra analisarmos e ampliarmos
        a rede de ace
        itação do nosso cartão.</span></p>
erickok commented 2 years ago

As per 3.0.0 the table support is a separate dependency. Please check the 3.0.0 readme.

We should have a better fallback behaviour though.

shinayser commented 2 years ago

Thank you for your answer @erickok I will do the code changes needed and return shortly👍

shinayser commented 2 years ago

Working perfectly now! Thanks for the support :)

ferozsho commented 2 years ago

@shinayser I used the " flutter_html: ^3.0.0-alpha.3" on project but still the tables are showing TABLE SECTION image

Sub6Resources commented 2 years ago

@ferozsho have you added the flutter_html_table dependency?