1

highlighted box

I am getting the box icon above the search icon.How to remove it.Below is my code.

<div class="slds-form-element slds-lookup" data-select="single">
    <div class="slds-form-element__control">
        <div class="slds-input-has-icon slds-input-has-icon--right">

            <lightning:input value="{!v.searchKeyword}"

                                 placeholder="search Accounts.."
                                 aura:id="searchField"
                                 label="Account Name"
                                 class="slds-lookup__search-input slds-input slds-p-bottom_medium"
                                 />

            <lightning:buttonIcon iconName="utility:search" onclick="{!c.Search}" alternativeText="Search" class="slds-input__icon slds-p-top_small" />

            </div>  

    </div>

</div>
1

This is happening because you are using padding in bottom- slds-p-bottom_medium. Use the following code, It may help you:enter image description here

<div class="slds-form-element slds-lookup" data-select="single">
        <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
                <div>
                    <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.Search }" alternativeText="Search" class="slds-input__icon" />
                </div>
                <div>
                    <ui:inputText value="{!v.searchKeyword}" class="slds-lookup__search-input slds-input" placeholder="Search" />
                </div>
            </div>

        </div>

    </div>
| improve this answer | |
0

If you dont wanna dig deep in SLDS css issues and can use ui:inputText instead of lightning:input, you can get it sorted in few lines.

<aura:application extends="force:slds">
    <div class="slds-form-element slds-lookup" data-select="single">
        <div class="slds-form-element__control">
            <div class="slds-input-has-icon slds-input-has-icon--right">
                <lightning:buttonIcon iconName="utility:search" variant="bare" onclick="{! c.handleClick }" alternativeText="Search" class="slds-input__icon" />
                <ui:inputText value="{!v.searchText}" class="slds-lookup__search-input slds-input" placeholder="Search" />
            </div>
        </div>
    </div>
</aura:application> 

And this code is refrenced from https://trailhead.salesforce.com/en/content/learn/projects/communities_theme_layout/custom_search

enter image description here

| improve this answer | |
  • Thanks for response.The issue is with label.if we mention label inside the input search bar the search icon will loose its actual position. – dileep Dec 27 '18 at 6:49

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.