0

I'm trying to render a buttonIcon inside an <input /> tag.

However, it's turning out like this:

enter image description here

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>
3
  • If you've changed the width of the input, this can happen - the icon is expecting a fixed width, as far as I recall. – Caspar Harmer Jan 10 '17 at 17:52
  • Okay. I didn't change anything to the input I believe. I'm trying to follow this example on slds design document: lightningdesignsystem.com/components/picklist/… – akcorp2003 Jan 10 '17 at 17:58
  • Try adding css 'width: 90%!important' to your input tag. – S.. Jan 10 '17 at 18:04
3

Change the class on your lightning:buttonIcon, e.g.

<lightning:buttonIcon 
    class="slds-button slds-input__icon slds-text-color--default" 
    iconName="utility:down" variant="bare" onclick="{!c.openDropdown}" 
    alternativeText="Open or close dropdown."/>

I found these by inspecting the DOM on the example here.

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.