0

I'm using SLDS datepicker on my VF page. I tried <apex:slds /> at the first place to load utility-sprite event icon to click and load the calendar. But it didn't load properly. Then i switched back to good old SLDS static resource. And it started loading. What could go wrong here. Here is my code. Appreciate your help.

<div class="slds-form-element__row">
    <div class="slds-form-element">

        <label class="slds-form-element__label boldText">Start Date</label>

        <div class="slds-input-has-icon slds-input-has-icon--right">

            <!-- Works with static resource but not with <apex:slds /> -->

            <svg aria-hidden="true"  class="slds-input__icon slds-input__icon--right slds-icon-text-default">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#event')}"></use>
            </svg>

            <!--
            <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#event" />
            </svg>
            -->
            <input id="fromdate" value="{!displayStartDate}" class="slds-input" type="Text" tabindex="8" label="From"/> 
            <apex:inputHidden id="fromHidden" value="{!startDate}"/>


        </div>

    </div>
</div>
1

Tried the below and it works. the key is the static resource name you need to refer is

$Asset.SLDS

from documentation

To reference assets in the Lightning Design System, such as SVG icons and other images, use the URLFOR() formula function and the $Asset.SLDS global variable. To use SVG icons, add the required XML namespaces by using xmlns="http://www.w3.org/2000/svg" and xmlns:xlink="http://www.w3.org/1999/xlink" in the html tag.

<apex:page >
    <apex:slds />
    <div class="slds-form-element__row">
    <div class="slds-form-element">

        <label class="slds-form-element__label boldText">Start Date</label>

        <div class="slds-input-has-icon slds-input-has-icon--right">

            <!-- Works with static resource but not with <apex:slds /> -->

            <svg aria-hidden="true"  class="slds-input__icon slds-input__icon--right slds-icon-text-default">
                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Asset.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#announcement')}"></use>
            </svg>




        </div>

    </div>
</div>
</apex:page>

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.