4

I'm working on creating a Visualforce page that uses the Lightning Design System. As part of the VF page I'm trying to include an text input field which the user will use to input search terms. I would like to use the Input with icon to the right displaying a magnifying glass icon per the standard SLDS markup.

  <div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-01">Input Label</label>
    <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
      <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>
      </svg>
      <input id="text-input-01" class="slds-input" type="text" placeholder="Placeholder Text">
    </div>
  </div>

My problem is that the input field does not display at all. Label without input box

When I inspect the element I find that the input field is being placed inside the svg tag. Input tag inside svg tag

I have found that if I put a span or div tag around the input tag then the input tag will be outside of the svg tag like it is supposed to be and it will display the input box but the magnifying glass icon does not display.enter image description here enter image description here

I have the most recent version of SLDS and the markup is directly copied from the Lightning Design System website. What is going wrong and how can I get the magnifying glass to display properly?

Improve this question

1 Answer 1

Reset to default
5

In this line of code, this path should refer to your SLDS library which you uploaded in Static resources.

<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search"></use>

For example:

<use xlink:href="{!URLFOR($Resource.SLDS100, '/assets/icons/custom-sprite/svg/symbols.svg#custom3')}" />
Improve this answer
3
  • >,< Why is it always the stupidest things. argghh. So that gets me the magnifying icon when my input is surrounded by span tags. Any idea why when I remove the span tags the input tag gets shoved inside the svg tag?
    – dBeltowski
    Commented May 25, 2016 at 18:50
  • hmm. not sure about that
    – Cloud Man
    Commented May 25, 2016 at 18:55
  • @SFNinja now that SLDS is baked into Lighting Experience, how would we go about this sort of thing now?
    – John Thompson
    Commented Oct 26, 2016 at 19:12

You must log in to answer this question.

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