0

I have implemented a generic lookup component. The issue that i am facing is that i cannot find a way to "move" inside the lightning input my lightning icon. Any ideas? Code Below:

<!--Component-->
    <div class="slds-form-element__control">
        <div class="slds-combobox_container slds-has-inline-listbox slds-input-has-icon 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 slds-icon_small slds-icon-text-default" iconName="{!v.lookupIcon}" size="x-small" alternativeText="icon" />
                </span> 
                <div class="slds-combobox__form-element">
                            <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="leftspace"/>
                        </div> 
                <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>

My Component is shown as below, and i want to find a way to have the icon inside my lightning input. enter image description here

0

1 Answer 1

2

For customizing elements as you are, it is recommeded to use the SLDS blueprints and tweak the code/css as needed. example,

<div class="slds-form-element">
        <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
        <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
            <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#record_update"></use>
            </svg>
            <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
            </svg>
            <input type="search" id="text-input-id-1" placeholder="Placeholder text…" class="slds-input" />
        </div>
    </div>

the above is an extract from the slds blueprints with 2 icons within the "input" element. the only thing left to do is add margins to the elements so the 2 icons are properly placed within the input as well as a margin to the input element, so the placeholder does not overlap with the icons. enter image description here

You must log in to answer this question.

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