responsive-email icon indicating copy to clipboard operation
responsive-email copied to clipboard

Content stretching

Open DavidPetrasek opened this issue 9 months ago • 0 comments

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):

Image

With inline-table the first column (table) stretches to fill the remaining space (desired result):

Image

Proposal

Add a new property to ResponsiveColumn to control content streching. Something like this: <ResponsiveColumn strechContent={true|false}>

DavidPetrasek avatar Jan 28 '25 09:01 DavidPetrasek