flutter_widget_from_html
flutter_widget_from_html copied to clipboard
daohoangson
Need better support for column widths / wide table
- [ ] Add support for COLGROUP, COL tag, related to #339
- [x] Add support for
style="width: 50"in columns, related to #209 - [x] Add support for horizontal scrolling if table is too wide, related to #400
Previous work: #346
- [ ] Add support for horizontal scrolling if table is too wide, related to #400
As a small suggestion our Widget Factory for tables. We have currently implemented here that tables may be a maximum of two times as wide as the screen width. The table is also scrollable only if it has more than two columns. Of course, these restrictions don't always work, but it works very well for our tables.
mixin ScrollableTableFactory on WidgetFactory {
@override
void parse(BuildMetadata meta) {
switch (meta.element.localName) {
case HTMLTag.table:
meta.register(BuildOp(
onWidgets: (meta, widgets) => listOrNull(
widgets.first.wrapWith(
(context, child) => ScrollableTableFromHtml(
element: meta.element,
child: child,
),
),
),
));
}
return super.parse(meta);
}
}
class ScrollableTableFromHtml extends StatelessWidget {
const ScrollableTableFromHtml({required this.child, required this.element});
final Widget child;
final dom.Element element;
@override
Widget build(BuildContext context) {
final double width = context.mediaQuery.size.width;
return _columnCount(element) <= 2
? child
: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: LimitedBox(maxWidth: width * 2, child: child),
);
}
int _columnCount(dom.Element element) {
final List<dom.Element> tableRows = element.getElementsByTagName('tr');
return _getCountOrNullByTag(tableRows, 'th') ?? _getCountOrNullByTag(tableRows, 'td') ?? 0;
}
int? _getCountOrNullByTag(List<dom.Element> tableRows, String tag) {
final int? count = tableRows.firstOrNull?.getElementsByTagName(tag).length;
return count != 0 ? count : null;
}
}
That's an interesting workaround @DFelten 🤣 Hopefully with proper column width support, we should have better insight to decide whether it should be scrollable.
No update on this front yet. Sorry.
Maybe now there is another opportunity to get the next template?
50% | 50% | 100px |100px
I can not make a two html elements in one row with a different width. Only 50/50
we have problems with table lines getting cut off. Please see our released app... Tipitaka Pali Reader open a book, click on the blue tab to increase font size a few times to 18 pt font click on word in pali .. and expand the definition from digital pali dictionary. You will see the table gets cut off instead of word wrap. There is a setting for this in tables, but it is not supported in htmlwidget
Next release will have a font size slider and panel size to compensate. We are still waiting for clickable and
here is the code.. (beautified) `
buddha 1: masc. Buddha; Awakened One [√budh + ta]
| Pāḷi | buddho |
|---|---|
| Grammar | masc, pp of bujjhati |
| Meaning | Buddha; Awakened One. |
| Root | √budh 3 ya (know, wake up) |
| Construction | √budh + ta |
| Derivative | kita (ta) |
| Phonetic | dht > ddh |
| Commentary | (SNa) buddhassā’ti catunnaṃ saccānaṃ buddhatt’ādīhi kāraṇehi vimokkh’antika-paṇṇattivasena evaṃ laddhanāmassa |
| Sanskrit | buddha |
| Sanskrit Root | √budh 4, 1 (know, wake) |
| Submit a correction | |
<p>
<div>
<details>
<summary>
<b>buddha 1</b>: masc. <b>Buddha; Awakened One</b> [√budh + ta]
</summary>
<table>
<tr>
<th valign="top">Pāḷi</th>
<td>buddho</td>
</tr>
<tr>
<th valign="top">Grammar</th>
<td>masc, pp of bujjhati</td>
</tr>
<tr>
<th valign="top">Meaning</th>
<td>
<b>Buddha; Awakened One</b>.
</td>
</tr>
<tr>
<th valign="top">Root</th>
<td>√budh 3 ya (know, wake up)</td>
</tr>
<tr>
<th valign="top">Construction</th>
<td>√budh + ta</td>
</tr>
<tr>
<th valign="top">Derivative</th>
<td>kita (ta)</td>
</tr>
<tr>
<th valign="top">Phonetic</th>
<td>dht > ddh</td>
</tr>
<tr>
<th valign="top">Commentary</th>
<td>(SNa) buddhassā’ti catunnaṃ saccānaṃ buddhatt’ādīhi kāraṇehi vimokkh’antika-paṇṇattivasena evaṃ laddhanāmassa</td>
</tr>
<tr>
<th valign="top">Sanskrit</th>
<td>buddha</td>
</tr>
<tr>
<th valign="top">Sanskrit Root</th>
<td>√budh 4, 1 (know, wake)</td>
</tr>
<tr>
<td colspan="2">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSf9boBe7k5tCwq7LdWgBHHGIPVc4ROO5yjVDo1X5LDAxkmGWQ/viewform?usp=pp_url&entry.438735500=buddha 1&entry.1433863141=TPR 2022-12-11" target="_blank">Submit a correction</a>
</td>
</tr>
</table>
</details>
</div>
</p>
v0.14.4 has been released with support for horizontal scrolling if columns are too wide FYI.
It works. We are happy.. I had a problem with the factory and the BuildTree objects , but we don't use it anymore so we could delete. That is good.
Can "If table columns are still too wide -> make it scrollable" be disabled?
In my case, there are multiple tables in the page. Some of them are placed side-by-side. I want to show all of them full-width and make the whole widget scrollable horizontally.
@vipranarayan14 if you put the entire HtmlWidget in a scroll view, it will skip the scroll view for each table IIRC.
v0.14.4has been released with support for horizontal scrolling if columns are too wide FYI.
Could you please provide a hint how to manage content that is larger than the screen size (width)? After updating the package to v0.14.4. for example, a table automatically scales to fit the screen, but instead of scaling, needs to scroll the table if it does not fit on the screen.
