[SalesForce] Line breaks in Lightning component HTML source code put space around the element

While tinkering with Lightning base components, I realized that a linebreak – which may seem to have no effect at all – can actually have a visual impact. I don't have a strong HTML background so I'm asking here.

I was trying to a invoke lightning:tab component, with icon. This is the code and resulting visual:

<lightning:tab>
        <aura:set attribute="label">
            <lightning:icon iconName="utility:open" size="x-small" />Open
        </aura:set>
        Content1
    </lightning:tab>

Then I add a linebreak after lightning:icon as below:

<lightning:tab>
        <aura:set attribute="label">
            <lightning:icon iconName="utility:open" size="x-small" />
            Open
        </aura:set>
        Content1
    </lightning:tab>

And now there's a space between icon and label, which now looks fine:

If I hadn't realized that, I was going to add slds-margin class attribute to each lightning:icon component, which is extra code.

Is this an expected behavior? If so, please redirect me to an online source where I can learn such HTML "secret spots".

Best Answer

All Lightning Design System components presume that you do not include any extra space before or after text/elements. HTML collapses multiple white space into a single white space if any are present. The following are rendered the same:

<a> Link Text </a>

<a>         Link        Text      </a>

<a>
  Link            Text
</a>

This is a problem with HTML in general, not specific to Lightning Components. When in doubt, do not introduce new white space, but instead use the appropriate padding CSS elements provided to you by SLDS.

Specific to Lightning Tabs, it is recommended that there be a space between the text, as demonstrated in the documentation:

 <aura:component>
    <lightning:tabset>
        <lightning:tab>
            <aura:set attribute="label">
                Item One
                <lightning:icon iconName="utility:connected_apps" />
            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</aura:component>

Related Solutions

[SalesForce] How to add tooltips to lightning:input components

"fieldLevelHelp" attribute works for lightning:input component too even though it's not been documented. It's documented for lightning-input and aura components use LWC under the covers.

<lightning:input label="Custom Label" 
             value="Custom Text" 
             fieldLevelHelp="Help text goes here" />

You can also create your own field with custom rendering using the below code without the need for any CSS:

<lightning:layoutItem>
 <span class="slds-form-element">
     <label for="textInput" 
            class="slds-form-element__label slds-no-flex">
         Custom Label
     </label>
     <lightning:helptext content="{!v.fieldLevelHelp}" />
     <div class="slds-form-element__control slds-grow">
         <!--Custom rendered element -->
         <a id="textInput" 
            target="_blank" 
            href="{/lightning/r/'+v.recordId + '/view'}"> 
            Custom Link Label
         </a>
     </div>
</span>
</lightning:layoutItem>

[SalesForce] How to get an html element through it’s class name in a lightning component controller

init handler is called long before DOM is rendered in the view by the component. The appropriate place to access DOM, is in Renderer.

Add afterRender method which in turn gets called once the DOM rendering is done:

    afterRender : function(cmp,helper){
        this.superAfterRender();
        var elements = document.getElementsByClassName("myTest");
        console.log("elements.length: " + elements.length);
        for (var i=0; i<elements.length; i++) {
            console.log(elements[i].innerHTML);
        }
    }

Best Answer

Related Solutions

[SalesForce] How to add tooltips to lightning:input components

[SalesForce] How to get an html element through it’s class name in a lightning component controller

Related Topic