0

I have a simple lightning component that I'm displaying on an opportunity record page and I'm using the component set visibility filters to show or hide the component if the filter criteria is met. I've positioned the component at the top of the record page and I'm trying to adjust the positioning of the text inside the component. I'm using the style:

.THIS { width: 100%; }

So, the component expands the full width of the window. The text is aligned to the left.

Here is the component:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <div class="slds-notify slds-notify_toast slds-theme_error">
        <div class="slds-notify__content">
            <h2 class="slds-text-heading_small slds-align_absolute-center">Message Title Goes Here!!</h2>
            <br/>
            <p class="slds-align_absolute-center">My Message Body Goes Here!!</p>                
        </div>
    </div>  
</aura:component>

I'd like to align the text to be centered across the full width of the component. I've tried using text-align: center; and adjusting the margins, but the text does not adjust.

1

The main reason for the styling to get overridden is slds-notify_toast class. From your question, it appears it dont want to show as toast. Ideally, even if you want to show toast you should be using lightning:notificationsLibrary.

However, if you dont want toast, then remove slds-notify_toast and use slds-box instead to get appropriate box with padding.

<div class="slds-notify slds-box slds-theme_error">
    <div class="slds-notify__content">
        <h2 class="slds-text-heading_small slds-align_absolute-center">Message Title Goes Here!!</h2>
        <br/>
        <p class="slds-align_absolute-center">My Message Body Goes Here!!</p>                
    </div>
</div>
  • Thank you! That worked! – Dman100 Aug 22 '19 at 15:23

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.