6

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>
2

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.

  • Hi @Jesse Milburn - i have defined them actually. this is for including the "check" icon inside each block of the sales path. Didn't help even if i commented – SF Ninja Mar 22 '16 at 19:03
  • Here is what the vf page looks like at present: iqbal-developer-edition.na22.force.com/ErrorSnapshot – SF Ninja Mar 22 '16 at 19:23
  • @AsifK I am not sure the xml comments are going to make a difference, but it is worth a shot. If that doesn't work, take your rendered html and put it in a validator – Jesse Milburn Mar 22 '16 at 19:39
2

Got it resolved. The margin property for css selectors ul, li was being overridden by the salesforce standard stylesheet "common.css". To avoid this, i added property standardStylesheets="false" in vf 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.