0

I have implemented a custom lookup component and i added this component in another Lightning Aura Component as a child. My problem is that the child component is having something like a border, which i need to erase. This is how my form is shown: enter image description here

Any ideas on what i should do? I both tried changing the CSS of child and parent components but no luck.

Code below: Parent CMP

<aura:component>
<!-- Handlers Definition -->
<aura:handler name="init" value="{!this}" action="{!c.init}" />
<aura:handler name="lookupSelect" event="c:el_sObjectLookupSelectEvent" action="{!c.handleLookupSelectEvent}"
              description="Event handler to get the selected DOY Id, Name and el_Code__c from LookupItem component"/>

<aura:attribute name='truebool' Type='Boolean' default='true' access='private'/>

<aura:attribute name='account' type='Account'/>
<aura:attribute name='ACRs' type='AccountContactRelation[]'/>
<aura:attribute name='hasAlternateContact' Type='Boolean' default='false'/>
<aura:attribute name='newContact' type='Contact' />

<aura:method name="addValidation" action="{!c.addValidation}" >
    <aura:attribute name="recordId" type="String" /> 
    <aura:attribute name="fieldApi" type="String" /> 
    <aura:attribute name="message" type="String" /> 
</aura:method>


<lightning:card iconName='standard:account' title="Account">
    <!-- <aura:set attribute="actions">
        <lightning:button label="New"/>
    </aura:set> -->
    <div class="slds-grid">
        <div class="slds-col slds-size_1-of-2">
            <lightning:input aura:id='FirstName' type="text" label="First Name" name="FirstName" value="{!v.account.FirstName}" />
            <lightning:input aura:id='LastName' type="text" label="Last Name" name="LastName" value="{!v.account.LastName}" />
            <lightning:input aura:id='el_TIN__c' type="number" label="TIN" name="TIN" value="{!v.account.el_TIN__c}" />
            
            <c:el_sObjectLookup objectAPIName="el_Key_Value_Pair__c" fieldAPINames="Name,el_Code__c" 
                                subHeadingFieldsAPI = "el_Code__c" lookupIcon="custom:custom53"
                                placeholder = "Search DOY Name/Code" selectedRecordId = "{!v.account.el_Doy_Name__c}"
                                disabled= "false" extraQueryFilter="AND el_Type__c = 'DOY'"
                                fieldLabel="DOY" fieldLevelHelp="You can search with DOY Name/Code"/>
        </div>
        
        <div class="slds-col slds-size_1-of-2">
            <lightning:input aura:id='cscrm__Passport_Number__pc' type="text" label="Identification Number" name="ID" value="{!v.account.cscrm__Passport_Number__pc}" />
            <lightning:input aura:id='Phone' type="text" label="Phone" name="Phone" value="{!v.account.Phone}" />
            <lightning:input aura:id='el_Email__c' type="text" label="Email" name="Email" value="{!v.account.el_Email__c}" />
            <lightning:input type="text" label="DOY Code" name="el_DOY_Code__c" value="{!v.account.el_Doy_Code__c}" readonly="true" />
        </div>
    </div>


</lightning:card>
<lightning:card iconName='standard:contact' title="Alternative Contacts">
    <lightning:button label='status' onclick='{!c.handleClick}'/>
    <aura:if isTrue="{!v.hasAlternateContact}">
        <c:el_ContactsDataTable aura:id='IndividualAccContacts' isIndividualAccount="{!v.truebool}" ACRs="{!v.ACRs}" />
        
    <aura:set attribute="else">
        
        You have no Alternative Contacts
        
    </aura:set>
    </aura:if>
</lightning:card>
</aura:component>

Child Component: el_sObjectLookup.cmp

<!--el_sObjectLookup.cmp-->
<!--23/03/2021 @ggalaios Generic Lookup Component-->

<aura:component implements="flexipage:availableForAllPageTypes" 
access="global"
            controller="el_sObjectLookupController" 
description="Lightning component for lookup fields">

<!--Declare Attributes-->
<aura:attribute name="objectAPIName" type="String" required="true"
                description="Object API name used for searching records"/>

<aura:attribute name="fieldAPINames" type="String" required="true"
                description="API Name of fields to be searched"/>

<aura:attribute name="lookupIcon" type="String" default="standard:contact"
                description="Icon for lookup records"/>

<aura:attribute name="placeholder" type="String" default="Search..."
                description="Placeholder text for input search field"/>

<aura:attribute name="fieldLabel" type="String" required="true"
                description="input search field Label"/>

<aura:attribute name="selectedRecord" type="Object"
                description="Stores the whole selected Record"/>

<aura:attribute name="selectedRecordId" type="String"
                description="Used to store the selected record id.
                             While calling this component from other component,
                             set this attribute to the lookup field API name"/>

<aura:attribute name="selectedRecordName" type="String" default = ""
                description="This is used to show the selected record Name in search input"/>

<aura:attribute name="subHeadingFieldsAPI" type="String[]"
                description="Field API for the fields to be shown under the record Name.
                             Must be comma separated. Example: Email,Phone"/>

<aura:attribute name="matchingRecords" type="Object[]" access="private"
                description="List of records returned from server side call"/>

<aura:attribute name="extraQueryFilter" type="String" access="public" default=""
                description="Extra Query Filter if needed (e.g. select records of specific Type) "/>

<aura:attribute name="recordLimit" type="Integer" access="public" default="5"
                description="Total number of record to be returned"/>

<aura:attribute name="required" type="Boolean" default="false"
                description="Indicates whether lookup is required or not"/>

<aura:attribute name="readOnly" type="Boolean" default="false"
                description="Indicates whether lookup is read only or not"/>

<aura:attribute name="disabled" type="Boolean" default="false"
                description="Indicates whether lookup is disabled or not"/>

<aura:attribute name="fieldLevelHelp" type="String"
                description="Help text provided to the user"/>

<aura:attribute name="count" type="Integer" default="0" />

<aura:attribute name="rootRecordId" type="String" 
                description="Stores the root record id (applicable when searching child records) "/>

<aura:attribute name="relatedObjectAPIName" type="String" default = ""
                description="Object API name used for first searching on another (child) entity"/>

<aura:attribute name="relatedReferenceFieldAPIName" type="String" default = "" 
                description="API Name of field of the related object to be searched"/>

<aura:attribute name="relatedExtraFieldsToQuery" type="String" default = ""
                description="Extra fields to Query on the related Query. 
                             Only Id queried by default (e.g. name, el_Account__c)"/>

<aura:attribute name="relatedkeyFieldAPIName" type="String" default = ""
                description="Field API Name based on which the related records will be returned (e.g. el_To_Account__c)"/>
<!--End of Attributes Declaration-->

<!--Declare Handlers-->
<aura:handler name="lookupSelect" event="c:el_sObjectLookupSelectEvent" action="{!c.handleLookupSelectEvent}"
              description="Event handler to get the selected record Id and Name from LookupItem component"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<!--End of Handlers Declaration-->

<!--Component-->
<div class="slds-form-element__control">
    <div class="slds-combobox_container slds-has-inline-listbox slds-input-has-icon slds-input-has-icon_left-right">
        <div aura:id="divLookup"
             class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-combobox-lookup"
             aria-expanded="false" aria-haspopup="listbox" role="combobox slds-input-has-icon slds-input-has-icon slds-input-has-icon_left-right" >
            <span class="slds-icon_container slds-icon-utility-search slds-input__icon iconheight">
                <lightning:icon class="slds-icon slds-icon_small slds-icon-text-default slds-m-top_xxx-small" iconName="{!v.lookupIcon}" size="x-small" alternativeText="icon" />
            </span> 
            
            <aura:if isTrue="{!v.disabled== true}">
                <lightning:input 
                                 aura:id="searchOutput"
                                 required="{!v.required}"
                                 fieldLevelHelp="{!v.fieldLevelHelp}"
                                 label="{!v.fieldLabel}"
                                 name="{!v.fieldLabel}"
                                 readonly="{!v.readOnly}"
                                 disabled="{!v.disabled}"
                                 value="{!v.selectedRecordName}"
                                 onchange="{!c.handleSearchRecords}"
                                 isLoading="false"
                                 placeholder="{!v.placeholder}"
                                 onfocus="{!c.handleSearchRecords}"
                                 onblur="{!c.hideList}"
                                 class="slds-m-top_none"/>
                
                <aura:set attribute = "else">
                    <lightning:input type="search"
                                     aura:id="searchinput"
                                     required="{!v.required}"
                                     fieldLevelHelp="{!v.fieldLevelHelp}"
                                     label="{!v.fieldLabel}"
                                     name="{!v.fieldLabel}"
                                     readonly="{!v.readOnly}"
                                     disabled="{!v.disabled}"
                                     value="{!v.selectedRecordName}"
                                     onchange="{!c.handleSearchRecords}"
                                     isLoading="false"
                                     placeholder="{!v.placeholder}"
                                     onfocus="{!c.handleSearchRecords}"
                                     onblur="{!c.hideList}"
                                     class="slds-m-top_none"/>
                </aura:set>
            </aura:if>
            <div id="listbox-unique-id" role="listbox">
                <ul class="slds-listbox slds-listbox_vertical slds-dropdown slds-dropdown_fluid" role="presentation">
                    <aura:iteration var="rec" items="{!v.matchingRecords}">
                        <c:el_sObjectLookupItem record="{!rec}" subHeadingFieldsAPI="{!v.subHeadingFieldsAPI}" iconCategoryName="{!v.lookupIcon}"/>
                    </aura:iteration>
                </ul>
            </div>
        </div>
    </div>
</div>
</aura:component>
2
  • Without seeing some code, we won't be able to help you beyond guessing. Can you show us what you have so far?
    – sfdcfox
    Sep 1, 2021 at 11:57
  • Hi sfdcfox, question is updated with the html code. Sep 1, 2021 at 12:21

1 Answer 1

2
+50

The border you are seeing is most likely coming from the surrounding Lightning Card Component. If you don't want a border, replace the lightning card with some other wrapper element.

If you look at the card component in the documentation, you might notice that they all have a surrounding border.

Normally, you would want to leverage lightning layout and layout items to structure your page

1
  • Thanks for your answer! I will check it out Sep 4, 2021 at 18:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .