1

This is not making sense to me: I have a simple style declared in the component's css file:

.targetcolor  {
    background-color: #bff0ff;
}

Which I reference like this:

<lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="6" large-device-size="3">
<strong>My Simple Label</strong>
 </lightning-layout-item>
 <lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="6" large-device-size="3">
<strong>{MySimpleValue}</strong>
 </lightning-layout-item>

This normally works, unless:
The label wraps to a second line, in which case the background on the line that appears below the value to align with the wrapped label is now white
The value is empty - and again, the background value is white

Bit if I have layout item with size="12", with a blank value, the background does respect the CSS:

<lightning-layout-item class="slds-p-around_x-small targetcolor"  key={sd.Id} size="12" large-device-size="3">
<strong>{MyEmptySimpleValue}</strong>
</lightning-layout-item>

How do I get the background in the Layout Item to always use the CSS color in the class?

3
  • Is your layout vertical aligned ?
    – Rohit
    May 23 at 4:11
  • 1
    Adding - vertical-align="stretch" to the parent lightning-layout will solve this issue. Optionally , you can add multiple-rows="true" as well.
    – Rohit
    May 23 at 4:22
  • 1
    Thanks - vertical-align="stretch" did the trick (multiple rows didn't seem to be enough) May 23 at 13:11

1 Answer 1

1

Adding the solution from the comments section.

Using vertical-align="stretch" to the parent lightning-layout will help in wrapping the background along with the text.

More info - https://developer.salesforce.com/docs/component-library/bundle/lightning-layout/example

You must log in to answer this question.

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