1

I am using lightning component to override my standard 'new' action on custom object.

Problem is: Salesforce is generating a DOM element where it puts my lightning component's code. This div has padding around it and it is very annoying, because i am trying to make this custom form look like standard generated forms by salesforce.

Image of developer console.

enter image description here

There is image of developer console and image of my lightning component form used in action. Already tried to modify the DOM element's style from controller javascript but did not work out.

<aura:component controller="BuildingController" description="testComponent" implements="flexipage:availableForAllPageTypes,lightning:actionOverride,force:hasRecordId" access="global">


  <lightning:workspaceAPI aura:id="workspace"/>
  <aura:attribute name="url" type="String" default="{}"/>
  <aura:attribute name="vfHost" type="String" default="VALID-URL/>
  <aura:attribute name="address" type="String" default=""/>
  <aura:attribute name="test" type="String" default=""/>
  <aura:attribute name="today" type="Date" default=""/>
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<lightning:card title="" class="outerContainer">
  <div class="slds-container--center slds-container--large">
    <div class="slds-box" style="background: white">
      <div class="slds-form slds-form_compound">
        <fieldset class="slds-form-element" style="background: white">
          <legend class="slds-form-element__label slds-text-title_caps slds-text-heading--Large"
                  style="font-size: 18px">New Building
          </legend>
          <!--Section Title-->
          <div class="slds-section slds-is-open">
            <h3 class="slds-section__title slds-theme_shade">
              <span class="slds-truncate slds-p-horizontal_small" title="Information"
                    style="background-color: rgb(243, 242, 242); width: 100%">Information</span>
            </h3>
          </div>
          <!--Form Elements-->
          <div class="slds-form-element__group">
            <lightning:recordEditForm aura:id="recordEditForm" objectApiName="Building__c" onsuccess="{!c.navigate}">
              <lightning:messages/>
              <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                  <iframe frameborder="0" scrolling="false" aura:id="vfFrame"
                          src="{!'https://' + v.vfHost + '/apex/testIframe'}"
                          width="100%"
                          height="100%"></iframe>

                </div>
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:outputField fieldName="OwnerId"/>
                </div>
              </div>
              <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField aura:id="address" fieldName="Name" value="{!v.address}"/>
                </div>

                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Analyst__c"/>
                </div>
              </div>
              <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Number_of_rooms_residential__c"/>
                </div>
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Inspector__c"/>
                </div>
              </div>
              <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Number_of_rooms_nonresidential__c"/>
                </div>

                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Size_m3__c"/>
                </div>
              </div>
              <div class="slds-form-element__row">
                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Number_of_floors__c"/>
                </div>

                <div class="slds-form-element slds-size_1-of-2">
                  <lightning:inputField fieldName="Total_area_m2__c"/>
                </div>
              </div>

        <div class="slds-form-element__row">
            <div class="slds-form-element slds-size_1-of-2">
            </div>
            <div class="slds-form-element slds-size_1-of-2">
              <lightning:inputField fieldName="EHR_Energy_class_issued__c"/>
            </div>
          </div>
          <div class="slds-form-element__row">
            <div class="slds-form-element slds-size--1-of-1">
              <div class="slds-container--center slds-align_absolute-center">
                <lightning:button class="slds-button slds-button--neutral slds-m-top_small" onclick="{!c.cancelRecordCreation}" label="Cancel"/>
                <lightning:button class="slds-button slds-button--brand slds-m-top_small" type="submit" label="Save"/>
              </div>
            </div>
          </div>
        </lightning:recordEditForm>
      </div>
    </fieldset>
  </div>
</div>

  • 2
    You don't include any of your component code, have you tried using the CSS for slds form in your component? – crmprogdev Apr 26 '18 at 17:18
  • I did not include any of my component code, because even if i use empty lightning component, and override the 'new' action with that, Salesforce still auto-generates this ""div"" with class="brandBand_1", which has padding around it. So my custom form elements aren't causing the problem here. – RSICK Apr 27 '18 at 6:27
  • 2
    They may be doing that because you've not used the proper CSS to declare your component as a modal or as the kind of form they expect to see. That's why your code would be helpful. Without it, it's nearly impossible for anyone to help you. – crmprogdev Apr 27 '18 at 14:17
  • I added my code, i hope this can help you – RSICK Apr 30 '18 at 7:34
0

From looking at your code, you've put this on a card, you then immediately have an "slds-container--center slds-container--large" (that's going to have a margin associated with it) and then put a div with regular sized "slds-box" inside of it (which has the largest margin of all boxes).

A box has 3 possible margin settings that you've not taken advantage of which are "slds-box slds-box_small", "slds-box slds-box_x-small", and "slds-box slds-box_xx-small". Changing your code to a smaller margin for that box should make a significant difference in your component's appearance.

I'm not certain what your custom "outerContainer" CSS class does in terms of adding additional padding and margin space, but I'm fairly confident the "slds-container--center slds-container--large" does more than just center your content along with setting the size of the card containing the form. I'll add that there are other options beyond using the card (such as a modal) that might give you more of the appearance that you're looking for.

I highly recommend that you go through the Lightning Design System Documentation sections on Components and also on Utilities. For example, you can add any of the following CSS from LDS to adjust the padding:

<div class="slds-p-around_none"></div>
<div class="slds-p-around_xxx-small"></div>
<div class="slds-p-around_xx-small"></div>
<div class="slds-p-around_x-small"></div>
<div class="slds-p-around_small"></div>
<div class="slds-p-around_medium"></div>
<div class="slds-p-around_large"></div>
<div class="slds-p-around_x-large"></div>
<div class="slds-p-around_xx-large"></div>

Or the following to adjust margins:

<div class="slds-m-around_xxx-small"></div>
<div class="slds-m-around_xx-small"></div>
<div class="slds-m-around_x-small"></div>
<div class="slds-m-around_small"></div>
<div class="slds-m-around_medium"></div>
<div class="slds-m-around_large"></div>
<div class="slds-m-around_x-large"></div>
<div class="slds-m-around_xx-large"></div>
  • I realized that my code was not good, because i tested alot of things to figure out if that was the problem. But the case is, even if i do not add any elements, just an empty component, salesforce is injecting my custom ligh. component inside a div, which has padding around it.. developer.salesforce.com/forums/… check the question i asked in dev community. – RSICK Apr 30 '18 at 15:53
  • Also i inspected the detail view of the record. It has same div around every lightning component, to separete components from each-other. I think i have to use an element or tell salesforce somehow that there is only one component or something? – RSICK Apr 30 '18 at 16:01

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.