[SalesForce] Sales Path – Issue – Lightning Design System

I am trying to sales path using lightning design system css in a vf page.
The issue is – there is additional space coming in between stages in sales path.
All i can see in chrome developer tools console is this error Uncaught TypeError: Cannot read property 'attribs' of undefined

Here is what the vf page looks like:
http://iqbal-developer-edition.na22.force.com/ErrorSnapshot

Here is the code

<apex:page showHeader="false" showChat="false" sidebar="false" >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS100, '/assets/styles/salesforce-lightning-design-system.css')}"/> 
    <div class="slds-grid">
    <!--<button class="slds-button slds-button--icon-small slds-button--icon-border-filled slds-path__trigger slds-no-flex slds-m-horizontal--small">
      <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#chevrondown" styleClass="slds-button__icon"></c:svg>
      <span class="slds-assistive-text">Open</span>
    </button>-->
    <div class="slds-tabs--path" role="application">
      <ul class="slds-tabs--path__nav" role="tablist">
        <li class="slds-tabs--path__item slds-is-complete" role="presentation">
          <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
            <span class="slds-tabs--path__stage">
              <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>-->
              <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs--path__title">Contacted</span>
          </a>
        </li>
        <li class="slds-tabs--path__item slds-is-complete" role="presentation">
          <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
            <span class="slds-tabs--path__stage">
              <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>-->
              <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>
              <span class="slds-assistive-text">Stage Complete</span>
            </span>
            <span class="slds-tabs--path__title">Open</span>
          </a>
        </li>
        <li class="slds-tabs--path__item slds-is-complete" role="presentation">
          <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
            <span class="slds-tabs--path__stage">
              <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>-->
              <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>
            </span>
            <span class="slds-tabs--path__title">Unqualified</span>
          </a>
        </li>
        <li class="slds-tabs--path__item slds-is-complete" role="presentation">
          <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
            <span class="slds-tabs--path__stage">
              <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>-->
              <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>
            </span>
            <span class="slds-tabs--path__title">Nurturing</span>
          </a>
        </li>
        <li class="slds-tabs--path__item slds-is-complete slds-is-won" role="presentation">
          <a class="slds-tabs--path__link" id="tabs-path-1" aria-controls="content-path-1" aria-selected="false" tabindex="-1" role="tab" href="#void" aria-live="assertive">
            <span class="slds-tabs--path__stage">
              <!--<svg aria-hidden="true" class="slds-icon slds-icon--x-small">
                <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#check"></use>
              </svg>-->
              <c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>
            </span>
            <span class="slds-tabs--path__title">Closed Won</span>
          </a>
        </li>
      </ul>
    </div>
    <button class="slds-button slds-button--brand slds-button--small button--border-filled slds-path__mark-complete slds-no-flex slds-m-horizontal--small">Change Closed State</button>
  </div>
</apex:page>

Best Answer

Comment these lines out:

<c:svg path="/assets/icons/utility-sprite/svg/symbols.svg#check" styleClass="slds-icon slds-icon--x-small"></c:svg>

Unless you have them defined, which I'm guessing probably not.

You also need to account for --'s in commented out xml as that is not allowed in markup.

[Definition: Comments may appear anywhere in a document outside other markup; in addition, they may appear within the document type declaration at places allowed by the grammar. They are not part of the document's character data; an XML processor may, but need not, make it possible for an application to retrieve the text of comments. For compatibility, the string " -- " (double-hyphen) must not occur within comments.] Parameter entity references must not be recognized within comments.

I also put your code snip into an html validator. It says you have a closed <button> element that isn't open. But I don't see it.

Related Topic