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>
Improve this question

2 Answers 2

Reset to default
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.

Improve this answer
3
  • 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
    – Cloud Man
    Commented Mar 22, 2016 at 19:03
  • Here is what the vf page looks like at present: iqbal-developer-edition.na22.force.com/ErrorSnapshot
    – Cloud Man
    Commented Mar 22, 2016 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
    Commented Mar 22, 2016 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

Improve this answer

You must log in to answer this question.

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