search

daohoangson / flutter_widget_from_html

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.
https://pub.dev/packages/flutter_widget_from_html
MIT License
641 stars 241 forks source link

100% table width #971

Open sonuPrasas010 opened 1 year ago

sonuPrasas010 commented 1 year ago

Use case

Proposal

sonuPrasas010 commented 1 year ago

image

<table width="100%" border="2" style="text-align: center;"><tbody><tr><td>sonu</td><td>sonu</td><td>sonu</td><td>sonu</td></tr><tr><td>10,00,000</td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr><tr><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td><td>10,00,000<br></td></tr></tbody></table>

The table is not expanding to 100% width.

daohoangson commented 1 year ago

I think the TABLE tag doesn't support width attribute. Have you tried using inline style? Something like style="width: 100%".

gliitterpuke commented 1 year ago

Worked for me when I did <td style="width:100%">placeholder</td>!

daohoangson commented 1 year ago

Yeah, that works too.

gliitterpuke commented 1 year ago

Actually, noticing that it still doesn't work on web - mobile behaviour seems fine?

daohoangson commented 1 year ago

Do you have sample HTML and screenshot?

gliitterpuke commented 1 year ago

Do you have sample HTML and screenshot?

Sorry mistake on my end! My find/replace above works :)

daohoangson commented 1 year ago

That's good to know!

sonuPrasas010 commented 1 year ago

<p>The following ledger balance of a company was drawn up on 30th Chaitra last year</p><table style="width: 100%" border="1"><tbody><tr><td style="padding: 10px;"><b>Particulars</b></td><td style="padding: 10px;"><b>Amount</b></td></tr><tr><td style="text-align: left;">Opening stock</td><td>12,000</td></tr><tr><td style="text-align: left;">Purchase</td><td style="text-align: left;">40,000</td></tr><tr><td style="text-align: left;">Sales</td><td style="text-align: left;">1,32,000</td></tr><tr><td style="text-align: left;">Rent</td><td style="text-align: left;">18,000</td></tr><tr><td style="text-align: left;">Discount Cr.</td><td>14,000</td></tr><tr><td "="">General expenses</td><td>5,000</td></tr><tr><td style="text-align: left;">Wages</td><td style="text-align: left;">8,000</td></tr><tr><td style="text-align: left;">Capital</td><td style="text-align: left;">6,000</td></tr><tr><td style="text-align: left;">Fixed assets</td><td>80,000</td></tr></tbody></table><p><b>Additional information</b></p> <ol type="i"><li>Closing stock Rs.5,000</li><li>Provision for tax Rs.6,000</li><li>Depreciation on fixed assets 10%</li></ol><p>&nbsp; <b>Required:&nbsp; a.</b> Trading account <b>b. </b>Profit and loss account</p><p><b>Ans: Gross profit= 79,000, Net profit = 30,000</b></p> This is code. image This is result. Add width in style is also not working. Its redundant to add 100% on each td

tylertzeyang commented 5 months ago

@daohoangson @sonuPrasas010 May I know how can I overwrite the width specified in the td styling in customStylesBuilder? I've tried to set the width to 100% but it's still using the original width stated in the html styling

daohoangson commented 5 months ago

The inline styling has the highest specificity so for now you probably need to override WidgetFactory.parseStyle to skip it.