6

On Case object, i have a quick Action "Assign Case" which looks as followsenter image description here

markup looks like this

<aura:component implements="force:lightningQuickAction,force:hasRecordId" controller="AssignCaseController">
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="caseRecord" type="Object"/>
    <aura:attribute name="recordError" type="String"/>
    <aura:attribute name="isSpinnerVisible" type="Boolean" default="false" access="private" />

    <force:recordData recordId="{!v.recordId}" layoutType="FULL" targetRecord="{!v.record}" targetFields="{!v.caseRecord}" targetError="{!v.LDSErrors}"/>
    
    <div>
        <aura:if isTrue="{!v.isSpinnerVisible}" >
            <div class="slds-modal slds-fade-in-open">
                <lightning:spinner variant="brand" alternativeText="Loading"/>
            </div>
        </aura:if>
        
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_8-of-12 slds-form-element slds-text-align_center"> {!$Label.c.PF_AssignCase_DisplayMsg}</div>
            <div class="slds-col slds-size_4-of-12 slds-form-element slds-text-align_right">
                <button onclick="{!c.runAssignmentRules}" class="slds-button slds-button_brand">Submit</button>
            </div>
        </div>
    </div>
</aura:component>

From the picture, you can see that background is slightly colored, and i want background to be totally white (the way it is for standard quick Actions).

I cant seem to achieve that.

For the div where we have

<div class="slds-grid slds-wrap">

I added a class

<div class="slds-grid slds-wrap whitebackground">

In CSS for component, the class whitebackground has background color of "white"

This only covers a portion of the component, as shown below- enter image description here

Seems like one.app creates a wrapper around the component, which continues to stay grey and i cant seem to make it all white. Any suggestions?

Improve this question
4

NOTE This is a hack and completely experimental, it may break between releases due to CSS class changes and works as of Spring 18.

The background color is coming from a app.css class .cuf-scroller-outside. If you override this class you can change the background color. Basically, you have to add this following CSS inside the HTML markup.

<style>
    .cuf-scroller-outside {
        background: rgb(255, 255, 255) !important; 
    }
</style>

But Style tag is not allowed directly in lightning components from ver42. Still you can manage to add the style in following way by using <aura:unescapedHtml.

In your component declare the a attribute called cssStyle and set this up in the init method of the Controller.

Component

.............
.............
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
.............
<aura:attribute name="cssStyle" type="String"/>
<aura:unescapedHtml value="{!v.cssStyle}"/>
<force:recordData recordId="{!v.recordId}"........../>
..............
..............

Controller

..............
doInit : function(component, event, helper) {
    component.set("v.cssStyle", "<style>.cuf-scroller-outside {background: rgb(255, 255, 255) !important;}</style>");
}
..............
Improve this answer
  • If you know that the style tag is not allowed, and are using another tag to inject it, then this is pretty sure to break. – Robert Sussland May 10 '18 at 20:07
  • That's why I mentioned it is an experimental solution and should be used only for a temporary fix. – Saroj Bera May 11 '18 at 4:36
3

You can also use the aura:html tag to achieve this. Works for API version > 42:

<aura:html tag="style">
    .cuf-scroller-outside {
        background-color: white;
    }
</aura:html>
Improve this answer
  • That only works if you add the !important flag to the CSS value. – POZ May 2 '19 at 15:36
0

Use <div class="slds-box slds-theme_default">

Improve this answer

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.