0

Im trying to use the following markup

     <lightning:accordion>
        <aura:iteration items="{!v.faqs}" var="faq">

                <lightning:accordionSection label="{!faq.Name}" class="tWrap >
                    <ui:outputRichText value="{!faq.Body__c}" /> 
                </lightning:accordionSection> 

        </aura:iteration>
    </lightning:accordion>

Im looking to override the app.css file with some custom css in the accordionSection so the text wraps and it doesnt truncate in smaller screens but I'm not being very successful. the lightning:accordion is based on the accordion from the lightning design system. The section I want to toggle in the markup is nested in the button attribute:

class="slds-truncate" title="Accordion summary">Accordion summary<

.slds-truncate {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

Im trying to change "white-space" to "normal"

.THIS {
}

.THIS .tWrap {
white-space: normal;
}

Anyway I can achieve this or a different way of doing it?

Thanks in advance

0

You can override the slds-truncate class directly by adding the following to your CSS:

.THIS .slds-truncate {
    white-space: normal !important;
}
  • good point! ill try that..but wouldn't that override it in the whole component? how can I just localise it to an area? – JPG Mar 13 '18 at 11:19
  • If you want to localise it, add a class before it like this: .THIS .myclass .slds-truncate, and use "myclass" as a class on the actual accordion itself, it should traverse correctly that way! – Timothy Mar 13 '18 at 11:20
  • Instead of having !important, try increasing specificity. – Raul Mar 13 '18 at 11:30
  • Thanks Rahul, will try that approach too it seems its more best practice when it comes to CSS – JPG Mar 13 '18 at 12:31
  • using @Timothy's approach I was able to specify elements a couple levels up and got it to work while avoiding !important Thanks all – JPG Mar 13 '18 at 12:40

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.