0

I have a form where I need to display few details of logged in person on customer community. I am using lightning layout and layout item within a lightning card. I have first name with 40 chars and family name with 80 chars. Though used attributes flexibility=auto and size used in layout item the content seems to come out of the lightning card, looking as in snapshot below. I have already tried using a layout within layout with all available attributes but no luck. Can someone point me in right direction? Below is the code

<template>
<lightning-card title="details">
    <lightning-button label="Edit" id="details" slot="actions" onclick={handleClick}></lightning-button>
    <lightning-layout horizontal-align="start" multiple-rows="true">
        <lightning-layout-item flexibility="auto" size="4" padding="horizontal-medium">
            <p ><b>name:</b></p>
        </lightning-layout-item>
        <lightning-layout-item flexibility="auto"  size="8">
            <p >firstnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee lastnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemwmwmwmwmwmwmwmmwmwwmwmwmwmwmwmmwmwmwwwwm</p>
        </lightning-layout-item>          
    </lightning-layout>
</lightning-card>

enter image description here

0

This issue can be handled in css. You need to wrap everything inside the lightning-layout-item in a div with custom class

<lightning-layout-item flexibility="auto"  size="8">
    <div class="u-break-word">
        <p >firstnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee lastnameeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemwmwmwmwmwmwmwmmwmwwmwmwmwmwmwmmwmwmwwwwm</p>
    </div>
</lightning-layout-item>     
 

CSS change

.u-break-word {
    overflow-wrap: break-word;
}
1
  • 1
    This seems to work for me
    – Kanikala
    Apr 22 at 14:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.