The Issue:
As of today (Dec 23, 2024), there seems to be a regression in how the Retool Mobile HTML Component renders standard
tags.
Previously, an HTML table wrapped in a div with overflow-x: auto would render correctly: columns would sit side-by-side, and the user could scroll horizontally if the table was too wide.
Current Behavior:
The renderer now appears to be aggressively forcing display: block (or similar native behavior) on
and
| elements. This forces every single table cell to stack vertically into a "card" layout, making tabular data impossible to read.
Timeline:
This was working correctly earlier today. Without any code changes on our end, the rendering changed on a page reload, suggesting a platform-side update to the mobile renderer or the underlying react-native-render-html library configuration.
Steps to Reproduce:
-
Create a Retool Mobile app.
-
Drag in an HTML Component.
-
Paste the following "Minimum Reproducible Example" (Static HTML) into the value field:
codeHtml
<div style="padding: 10px; font-family: sans-serif;">
<h3>Static Table Test</h3>
<!-- The Scroll Wrapper -->
<div style="overflow-x: auto; border: 1px solid #ccc; border-radius: 4px;">
<!-- Standard HTML Table -->
<table style="width: 100%; border-collapse: collapse; min-width: 500px; background-color: #ffffff;">
<thead>
<tr style="background-color: #f0f0f0; border-bottom: 2px solid #ccc;">
<th style="padding: 10px; text-align: left;">ID</th>
<th style="padding: 10px; text-align: left;">Status</th>
<th style="padding: 10px; text-align: left;">Description</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid #eee;">
<td style="padding: 10px;">101</td>
<td style="padding: 10px;">Active</td>
<td style="padding: 10px;">This row should stay horizontal but it is stacking.</td>
</tr>
<tr style="border-bottom: 1px solid #eee;">
<td style="padding: 10px;">102</td>
<td style="padding: 10px;">Pending</td>
<td style="padding: 10px;">Another row to check alignment.</td>
</tr>
</tbody>
</table>
</div>
</div>
Attempted Fixes (None worked):
-
Adding display: table !important or display: flex to rows/cells (Styles appear to be stripped or ignored).
-
Using strict pixel widths (e.g., width: 600px).
-
Converting tags to tags with Flexbox (even divs are stacking, suggesting a very aggressive layout override).
Request:
Can the team confirm if an update was pushed to the Mobile renderer? We need a way to opt-out of this "Card View" enforcement or a workaround to restore horizontal scrolling for data grids.
|
