0

I m a newbie in Salesforce, and I have a quite simple question. I have a text that I display in a div element, but my problem is that when my text is too long, it overflows the screen.

however, from what I read about the properties of the CSS applied, my text should normally do a line feed depending on the type of screen used (desktop, phone)

Does anyone have a solution, please?

here my code


 <div class="slds-card">
        <lightning:layout horizontalAlign="spread" multipleRows="true">
        <lightning:layoutItem flexibility="grow" size="12">   
        <div class="slds-page-header">
            <header class="slds-media slds-media_center slds-has-flexi-truncate" style="{!v.backgroundColor}">

                <div class="slds-media__figure">
                    <lightning:Icon iconName="standard:record"  size="small" 
                             class="slds-icon slds-input__icon slds-input__icon_left " />
                </div>
                <div class="slds-media__body">
                    <h2>
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Invoice List">

                            <div class="slds-text-heading_small"> Offene Rechnungen zugzuguz uzuhzuzuz ugzugz ugzugzugz: <ui:outputCurrency aura:id="curr" value="{!v.totalAmount}" format="###,###,###.##"/> </div>

                            <div class="slds-text-body_regular">  <lightning:formattedText value="{!v.msg}" /> </div>

                        </a>
                    </h2>
                </div>
            </header>

             <div class="slds-no-flex">
                <div class="input-group">

                    <lightning:input type="toggle" label="Rechnungen mit überfälligem Datum anzeigen" messageToggleActive="Anzeigen" messageToggleInactive="Nicht anzeigen" name="inputSelectable" checked="{!v.showOutToDateInvoices}" onchange="{!c.doInit}"/>
                </div>                
                <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                    <lightning:input value="{!v.quoteSearchValue}" placeholder="Suche eine rechnungsnummer..." type="text" label="" name="Quote Search" onchange="{!c.doInit}"/>
                </div>      
            </div>

        </div>

here my result

in desktop modein desktop mode [in phone mode[3]

2
  • 2
    Can you show full code? Jun 8, 2020 at 8:14
  • hi, yes i have updated my original post to show the full code
    – Reims
    Jun 8, 2020 at 8:27

1 Answer 1

1

You are right that the header behaves like that because card header is not supposed to be much longer.

However, in exceptional cases like yours, you can override that by using style="white-space:normal;" to override parent div width style like truncate or fixed width. You can check example here

enter image description here

<template>
    <lightning-card>
        <p slot="title" style="white-space:normal;">Hello asd gsdgfsad esgsdf asgsdgsdfg sd asdad</p>
        <lightning-button label="New" slot="actions"></lightning-button>
        <p class="slds-p-horizontal_small">Card Body (custom component)</p>
        <p slot="footer">Card Footer</p>
    </lightning-card>

    <article class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-wrap">
                <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-account" title="account">
                        <span class="slds-assistive-text">account</span>
                    </span>
                </div>
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <a href="javascript:void(0);" class="slds-card__header-link slds-truncate" title="Accounts">
                            <span style="white-space:normal;">Hello asd gsdgfsad esgsdf asgsdgsdfg sd asdad</span>
                        </a>
                    </h2>
                </div>
                <div class="slds-no-flex">
                    <button class="slds-button slds-button_neutral">New</button>
                </div>
            </header>
        </div>
        <div class="slds-card__body slds-card__body_inner">Anything can go into the card body</div>
        <footer class="slds-card__footer">
            <a class="slds-card__footer-action" href="javascript:void(0);">View All
                <span class="slds-assistive-text">Accounts</span>
            </a>
        </footer>
    </article>
</template>

Note that if you remove style="white-space:normal;", it will truncate according to style inherited from parent elements

2
  • Thanks you ! it seems to work, the only thing is, can i keep the font and character size which is normally behind the class="slds-text-heading_small "> while using this Style= ="white-space:normal, cause now my text looks slighty smaller and the font is also different
    – Reims
    Jun 8, 2020 at 10:02
  • Update, yes it is possible to use both class= "slds-text-heading_small "and Style= "white-space:normal applied to the same element, it is probably a merge of both style . Thanks again
    – Reims
    Jun 8, 2020 at 10:09

You must log in to answer this question.

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