Sub6Resources
[BUG] custom `tr` not working in `customRender`
Describe the bug:
Html seems to ignore the custom tr renderer in customRender
HTML to reproduce the issue:
<div>
<div class=\"guide__table-wrapper\">
<table class=\"guide__table\">
<thead>
<tr>
<th>Innehåll i paket</th>
<th>Fri</th>
<th>Enkel</th>
<th>Normal</th>
<th>Aktiv</th>
</tr>
</thead>
<tbody>
<tr>
<td>Allmän kontroll av cykelns skickd</td>
<td>X</td>
<td>X</td>
<td>X</td>
<td>X</td>
</tr>
<tr>
<td>Pris</td>
<td></td>
<td>0</td>
<td>549 kr</td>
<td>899 kr</td>
</tr>
</tbody>
</table>
</div>
</div>
Html widget configuration:
Html(
shrinkWrap: true,
data: , // insert html
customRender: {
"table": (context, child) {
return Padding(
padding: const EdgeInsets.only(left: 12),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: (context.tree as TableLayoutElement).toWidget(context),
),
);
},
'tr': (context, child) {
return Container(
height: 48,
color: Colors.red,
padding: const EdgeInsets.all(40),
child: (child),
);
},
},
),
Expected behavior:
I expect every table row to be colored red. (nothing added in tr customRender) has any effect.
Changing from tr to td works as expected.
Device details and Flutter/Dart/flutter_html versions:
- flutter_html: ^2.1.1
- flutter: 2.10.3
- tested on Iphone 13 pro max
A picture of a cute animal (not mandatory but encouraged)
Is this still an issue on
flutter_htmlversion 3.0.0-alpha.5?
Tried to look into it, but the documentation is not complete enough for me to convert the example to the new customRenders implementation.
tr(): (context, buildChildren) {
return Container(
height: 48,
color: Colors.red,
padding: const EdgeInsets.all(40),
child: ... // how hand buildChildren back to the renderer?,
);
},
Yeah, the new API is a bit confusing. I went ahead and tested your code on 3.0.0-alpha.5, and it appears tables and customRender do not mix well in the newest version. We'll work to fix that! Thanks for bringing this to our attention!
What are you trying to achieve? For styling I suggest to use the styling API instead of custom render.
Since tr's are just markers for a layout they are part of the table render and indeed currently don't use any custom render. Is this something you need? Because it's not always (for more advanced tables) that there is one tr per table row, for example.
What are you trying to achieve? For styling I suggest to use the styling API instead of custom render.
Since tr's are just markers for a layout they are part of the table render and indeed currently don't use any custom render. Is this something you need? Because it's not always (for more advanced tables) that there is one tr per table row, for example.
Where I ran into this issue was trying to style every other tableRow, something like this w3 example
I haven't tested it recently, but I do believe the styling API can handle something simple like that. I'll test it out today and let you know what I find @casvanluijtelaar
Yeah I don't think there is any way currently to achieve that. You can apply styling to a tr but not for every other row.
Yeah I don't think there is any way currently to achieve that. You can apply styling to a tr but not for every other row.
That's why I was trying to implement it using the customRenderer and something like this:
/// returns true on every other slibling or
/// true if it's the only child
bool _isColoredTableRow(RenderContext context) {
final child = context.tree.element!;
if (child.parent!.nodes.length <= 1) return true;
final index = child.parent!.nodes.indexOf(child);
return index % 2 == 0;
}
And I ran into this issue :)
Yes I understand, it's just that trs aren't rendered by themselves, because they do not necessarily translate into a single, horizontal row, given col/row spans and such odd tables. I think your use case is very valid and that we should support some style application. Related (but more specific/complex): #1036