1

How can I implement this input field with a right icon button from the LSDS using Lightning Base Components?

enter image description here

This doesn't work

<div class="slds-form-element">
   <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
      <lightning:input type="number" name="percentVal" formatter="percent" step="0.01" />
      <lightning:buttonIcon iconName="utility:rules" variant="bare" />
   </div>
</div>

The icon gets displayed below the input field

enter image description here

1 Answer 1

1

Add the appropriate classes to the button icon:

class="slds-input__icon slds-input__icon_right"

..

<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
    <lightning:buttonIcon size="medium" iconName="utility:close" class="front slds-input__icon slds-input__icon_right" variant="bare"/>
    <lightning:input type="number" name="percentVal"  formatter="percent" step="0.01" />

</div>

enter image description here

In my case I had to add css to make the z-index 1. You may not have to but in the page I was testing on it was needed

.THIS .front{
    z-index: 1;
}
6
  • The icon is not centered correctly.. Sep 22, 2017 at 14:53
  • 1
    @RobertSösemann - Not sure how you want it but open up the dom inspector and start adding classes tot he icon to get it like you want it. Then add those classes / css to the icon in your component....maybe a slds-p-top_small or something. It is a PITA though as none of this "just works" lol
    – Eric
    Sep 22, 2017 at 14:54
  • 3
    @RobertSösemann - That my friend is a whole mother issue. I think I saw a similar question today - salesforce.stackexchange.com/questions/193168/…
    – Eric
    Sep 22, 2017 at 15:00
  • 1
    Yeah, it was mine ;-) I like "whole mother" :-D Sep 22, 2017 at 15:01
  • 4
    Was supposed to be "whole nother" issue. I'll leave it for ya though since both are grammatically incorrect anyway lol
    – Eric
    Sep 22, 2017 at 15:03

You must log in to answer this question.

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