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?
vertical-align="stretch"
to the parentlightning-layout
will solve this issue. Optionally , you can addmultiple-rows="true"
as well.