4

I'm creating a VF page using the Salesforce Lightning Design System, as part of this, I want to use SLDS Notifications to display page messages and other notifications.

<apex:outputPanel layout="block" id="repeatPanel" >
    <apex:repeat value="{!customPageMessages}" var="m" id="repeat">
        <div class="slds-notify_container slds-m-vertical--x-small">
          <div class="slds-notify slds-notify--alert slds-theme--alert-texture slds-theme--{!m.severity}" role="alert">
            <button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close" onClick="dismiss(this)">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
              </svg>
              <span class="slds-assistive-text">Close</span>
            </button>
            <span class="slds-assistive-text">{!m.severity}</span>
            <h2>{!m.message}</h2>
          </div>
        </div>
    </apex:repeat>
</apex:outputPanel>

I have run into an issue with not being able to reRender my <apex:repeat> tag. Looking at the logs it does appear that VF is evaluating my merge fields and formulas. After some investigating I've narrowed it down to this line.

<use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>

If I remove the <use> tag everything renders the way I'd expect it. However with the <use> tag in the markup, nothing gets rendered.

This happens in Chrome, Firefox, and IE.

0

Credit to Rohit Mourya

I think this is known limitation of the browser .Since the SVG use xlink you can't reRender SVG component.

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.