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?

up vote 3 down vote accepted

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>");
}
..............
  • 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 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 at 4:36

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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