2

I am displaying Lightning cards & have a problem where the card contents & card height of the cardsaren't lining up correctly when a certain field (TextAboveImage) has content or doesn't. What can I do to make the cards look similar when TextAboveImage has or doesn't have content.

                     <lightning-card>
                        <p class="slds-p-horizontal_small">{nominee.TextAboveImage}</p>
                        <div class="nominee-img" >
                             <img src={imageicon} class="user-image"/>
                        </div>
                    </lightning-card>

2 Answers 2

3

Your example demonstrates both lightning cards and HTML p elements grow with their content. If the paragraph has no content, it has no height. Have the paragraph has a class...

<p class="header slds-p-horizontal_small">{nominee.TextAboveImage}</p>

... and make the paragraph with its class have a no-break space in the end:

p.header::after {
    content: '\00a0'
}

Alternatively, consider to give the paragraph a fixed height, if line numbers vary:

p.header {
    height: 3rem;
}
0

If you don't want to use any CSS you just use the following:

<p class="slds-p-horizontal_small">{nominee.TextAboveImage}&nbsp;</p>

It will add a space at the end

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .