[SalesForce] lightning:input field hidden

I created a lightning component with lightning:recordEditForm and lightning:inputField to create a new record.

I have another field which I don't want it to be in the form but I want to populate it.

I didn't find a way to do this without put it in the form and use "slds-hidden" but that makes a gap in the UI.

Does someone know what to do in that case ?
I mean, is there a better way to hide the field ?
Or maybe a solution to "remove" the gap ?

Thanks.

Best Answer

Use slds-hide instead of slds-hidden.

So the thing is if you just want to disappear the element from the UI then use the slds-hidden and it will take its space.

And to remove the space as well use the slds-hide.

Related Solutions

[SalesForce] How to code ‘scoped tabs’ in Lightning Design System

Per the documentation

JAVASCRIPT NEEDS

The active tab has two markup requirements:

The .slds-active class should be placed on the li with .tabs--{variant}__item.

The corresponding .tabs--{variant}__content container receives .slds-show.

Inactive .tabs--{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.

So you will need to write JS that handles placing the slds-active classes and the slds-show/slds-hide classes when a user clicks a tab.

[SalesForce] $A.util.addClass not working on components that are inside aura:if

Fixed it in markup through what seems a juggle up of aura:if and aura:set:

<lightning:layout aura:id="modalSearch">
    <aura:if isTrue="{!v.showModal}">
        <c:modal title="Test Modal">
            <aura:set attribute="left">
                <aura:if isTrue="{!$Browser.isIPad}">
                    <lightning:button  aura:id="leftCancelButton" variant="neutral" label="Cancel" onclick="{!c.hideModal}" class="{!v.enableButtons ? '' : 'slds-hide'}"/>
                </aura:if>
            </aura:set>
            <aura:set attribute="right">
                <aura:if isTrue="{!$Browser.isIPad}">
                    <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" class="{!v.enableButtons ? '' : 'slds-hide'}"/>
                    <aura:set attribute="else">
                        <aura:if isTrue="{!v.enableButtons}">
                            <lightning:button aura:id="rightCancelButton" variant="neutral" label="Cancel" value="modalSearch" onclick="{!c.hideModal}" />
                            <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" />
                        </aura:if>
                    </aura:set>
                </aura:if>
            </aura:set>        
        </c:modal>
    </aura:if>
</lightning:layout>

Still the question of why add/remove class is not working is open.

Best Answer

Related Solutions

[SalesForce] How to code ‘scoped tabs’ in Lightning Design System

[SalesForce] $A.util.addClass not working on components that are inside aura:if

Related Topic