4

I'd like to design the front end of my app using the Lightning Design System framework before I hook it up to the backend of my salesforce org. I downloaded the resources from the Light Design System site. These are the resources I have connected to my index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<head>
   <title>Project Name</title>
   <link rel="stylesheet" href="assets/styles/salesforce-lightning-design-system.css">
</head>

It appears that some resources are not showing up when implement the code, such as SVGs. Also, the modal isn't closing when I set the aria-hidden="true".

What am I missing?

1

The problem was with the path to the asset for the SVG icon. The code you copy and paste from the Lightning Design System site for the modal is like so

<div class="slds-modal slds-fade-in-open" aria-hidden="true" role="dialog">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-button--icon-inverse slds-modal__close">
        <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
          <use xlink:href="/assets/icons/action-sprite/svg/symbols.svg#close"></use>
        </svg>

Since my index.html file was on the same level as the assets folder, I needed to include a . in my file path

<div class="slds-modal slds-fade-in-open" aria-hidden="true" role="dialog">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-button--icon-inverse slds-modal__close">
        <svg aria-hidden="true" class="slds-button__icon slds-button__icon--large">
          <use xlink:href="./assets/icons/action-sprite/svg/symbols.svg#close"></use>
        </svg>

The modal not closing involves the aria-hidden="true" and making sure the CSS tags slds-fade-in-open and slds-backdrop--open are removed from the modal code. And of course using JavaScript to add/remove the classes when the appropriate buttons are clicked.

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.