Open
Description
Each ResponsiveColumn
has display: inline-block
, but it happened to me that I needed to use display: inline-table
.
Here is the code to show you what I mean by using the classic Row
and Column
:
<Section>
.....
<Row>
<Column>
<Section className="inline-block max-w-[900px]"> <-- Problem resolved by changing to inline-table
<Row>
<Column className="bg-red-500">
<Text className="">
{"{{message}}"}
</Text>
</Column>
</Row>
</Section>
<Section className="inline-table w-6"></Section>
<Section className="inline-table w-[28%]">
<Row>
<Column>
IMAGE
</Column>
</Row>
</Section>
</Column>
</Row>
.....
</Section>
With inline-block
the first red column (table) takes the width of its content (wrong):
With inline-table
the first column (table) stretches to fill the remaining space (desired result):
Proposal
Add a new property to ResponsiveColumn
to control content streching.
Something like this:
<ResponsiveColumn strechContent={true|false}>
Metadata
Metadata
Assignees
Labels
No labels