function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
jojoforcejojoforce 

lightning design system modals not displaying correctly in Salesforce LEX

I'm using the following modal example in Lightning Design System, however, inside Salesforce Lightning Experience, this does not display correctly. The top portion of the modal form does not show correctly and I was wondering how to adjust the positioning of this modal. This seems like a defect in the Lightning Design System and was wondering how to go around it. Thanks!



https://www.lightningdesignsystem.com/components/progress-indicator/
<div role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal--large" aria-labelledby="header43">
  <div class="slds-modal__container">
    <div class="slds-modal__header">
      <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close">
  
        <span class="slds-assistive-text">Close</span>
      </button>
      <h2 id="header43" class="slds-text-heading--medium">Modal Header</h2>
    </div>
    <div class="slds-modal__content slds-grow slds-p-around--medium"></div>
    <div class="slds-modal__footer slds-grid slds-grid--align-spread">
      <div class="slds-progress slds-progress--shade slds-order--2">
        <ol class="slds-progress__list">
          <li class="slds-progress__item slds-is-completed">
            <button class="slds-button slds-button--icon slds-progress__marker slds-progress__marker--icon" aria-describedby="step-1-tooltip" title="settings">

              <span class="slds-assistive-text">Step 1 - Completed</span>
            </button>
          </li>
          <li class="slds-progress__item slds-is-active">
            <button class="slds-button slds-progress__marker" aria-describedby="step-2-tooltip">
              <span class="slds-assistive-text">Step 2 - Active</span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-3-tooltip">
              <span class="slds-assistive-text">Step 3 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-4-tooltip">
              <span class="slds-assistive-text">Step 4 </span>
            </button>
          </li>
          <li class="slds-progress__item">
            <button class="slds-button slds-progress__marker" aria-describedby="step-5-tooltip">
              <span class="slds-assistive-text">Step 5 </span>
            </button>
          </li>
        </ol>
        <div class="slds-progress-bar">
          <span class="slds-progress-bar__value" style="width:25%;">
            <span class="slds-assistive-text">Progress: 25%</span>
          </span>
        </div>
      </div>
      <button class="slds-button slds-button--neutral slds-order--1">Cancel</button>
      <button class="slds-button slds-button--brand slds-order--3">Save</button>
    </div>
  </div>
</div>
<div class="slds-backdrop slds-backdrop--open"></div>
This is the correct display and I should see the header of the modal like below

User-added image

Inside Salesforce Lightning Experience - this is what I see and this is not correct as the header of the modal is not displayed at all
User-added image
Laxman Vattam 26Laxman Vattam 26
Check below link to see sample VF page using SLDS along with output. Check if that code resolves your issue
https://yoursalesforceguide.blogspot.com/2017/03/develop-visualforce-page-in-lightning.html