I'm trying to render a buttonIcon inside an <input />
tag.
However, it's turning out like this:
I would like the buttonIcon to appear inside the box.
Here's my code:
<aura:component >
<div aura:id="dropdown" class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click">
<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-01">Categories</label>
<div class="slds-grid slds-form-element__control slds-input-has-icon slds-input-has-icon--right slds-picklist__input">
<input type="search" id="text-input-01" class="slds-lookup__search-input slds-input" placeholder="Select an Option" aria-owns="option-list-01" role="combobox" aria-activedescendant="" aria-expanded="true" readonly="" />
<lightning:buttonIcon iconName="utility:down" variant="bare" onclick="{!c.openDropdown}" alternativeText="Open or close dropdown."/>
</div>
</div>
<div class="slds-dropdown slds-dropdown--left slds-dropdown--length-5" role="listbox">
<ul id="option-list-01" class="slds-dropdown__list" role="presentation">
<li class="slds-is-selected" role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="0" id="listbox-option-2279">
<lightning:icon iconName="utility:check" size="xx-small" />
<span class="slds-truncate">Option A</span>
</span>
</li>
<li role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2280">
<span class="slds-truncate">Option B</span>
</span>
</li>
<li role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2281">
<span class="slds-truncate">Option C</span>
</span>
</li>
<li role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2282">
<span class="slds-truncate">Option D</span>
</span>
</li>
<li role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2283">
<span class="slds-truncate">Option E</span>
</span>
</li>
<li role="presentation">
<span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2284">
<span class="slds-truncate" title="Option FGHIJKLMNOPQRSTUVWXYZ">Option FGHIJKLMNOPQRSTUVWXYZ</span>
</span>
</li>
</ul>
</div>
</div>
</aura:component>
Best Answer
Change the class on your
lightning:buttonIcon
, e.g.I found these by inspecting the DOM on the example here.