3

I have a custom edit vf page with multiple sections. I'm trying to use the multi-select lightning design component on a pageblock section but the page alignment looks weird. The component looks good when I have it on a single page

Page Alignment:

enter image description here

VF Component:

<apex:component >
<apex:attribute name="xlink:href" type="String" description="TODO: Describe me"/>
<apex:attribute name="class" type="String" description="TODO: Describe me"/>
<apex:attribute name="aria-hidden" type="String" description="TODO: Describe me"/>
<apex:attribute name="styleClass" type="String" description="Class for svg tag" />
<apex:attribute name="path" type="String" description="Path for svg tag" />
<svg aria-hidden="true" class="{!styleClass}">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{!URLFOR($Resource.SLDS092, path)}" />
</svg>

VF Page:

 <apex:page standardController="sample__c">
 <apex:form >
 <apex:sectionHeader title="{!$ObjectType.Osample.label}" subtitle="{!sample__c.name}"/>
  <apex:pageBlock title="{!$ObjectType.sample.label} Detail">
    <apex:pageBlockButtons >
        <apex:commandButton action="{!save}" value="Save"/>
 <!---       <apex:commandButton action="{!saveAndNew}" value="Save & New"/>  --->
        <apex:commandButton action="{!cancel}" value="cancel"/> 
      <font color="#ff0000"><strike>
       </strike></font> 
       </apex:pageBlockButtons>
    <apex:pageBlockSection showHeader="false" columns="2">
        <apex:inputField value="{!sample__c.Name}" required="true"/>

       </apex:pageBlockSection>
    <apex:pageBlockSection showHeader="true" title="Sample Information" columns="2">
     <apex:inputField value="{!sample__c.first__c}"/>
     <apex:inputField value="{!sample__c.Second__c}"/>
     </apex:pageBlockSection>
    <apex:outputPanel styleClass="slds">
    <apex:pageBlockSection showHeader="true" title="Add Multi-select"  >
    <apex:stylesheet value="{!URLFOR($Resource.SLDS092, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
    <div class="slds-picklist--draggable slds-grid">
  <div class="slds-form-element">
  <span class="slds-form-element__label" aria-label="select-1">First Category</span>
  <div class="slds-picklist slds-picklist--multi">
    <ul class="slds-picklist__options slds-picklist__options--multi shown">
      <li draggable="true" id="po-8-0" class="slds-picklist__item" aria-selected="false" tabindex="0" role="option">
        <span class="slds-truncate">
          <span>Option One</span>
        </span>
      </li>
      <li draggable="true" id="po-9-1" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Two</span>
        </span>
      </li>
      <li draggable="true" id="po-10-2" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Three</span>
        </span>
      </li>
      <li draggable="true" id="po-11-3" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Four</span>
        </span>
      </li>
      <li draggable="true" id="po-12-4" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Five</span>
        </span>
      </li>
      <li draggable="true" id="po-13-5" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Six</span>
        </span>
      </li>
      <li draggable="true" id="po-14-6" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Seven</span>
        </span>
      </li>
      <li draggable="true" id="po-15-7" class="slds-picklist__item" aria-selected="false" tabindex="-1" role="option">
        <span class="slds-truncate">
          <span>Option Eight</span>
        </span>
      </li>
    </ul>
  </div>
</div>
<div class="slds-grid slds-grid--vertical">
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#left"/>
    <span class="slds-assistive-text">Arrow left</span>
  </button>
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#right"/>
   <span class="slds-assistive-text">Arrow right</span>
  </button>
</div>
<div class="slds-form-element">
  <span class="slds-form-element__label" aria-label="select-2">Second Category</span>
  <div class="slds-picklist slds-picklist--multi">
    <ul class="slds-picklist__options slds-picklist__options--multi shown"></ul>
  </div>
</div>
<div class="slds-grid slds-grid--vertical">
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#up"/>
    <span class="slds-assistive-text">Arrow up</span>
  </button>
  <button class="slds-button slds-button--icon-container">
    <c:svg styleClass="slds-button__icon" path="/assets/icons/utility-sprite/svg/symbols.svg#down"/>
     <span class="slds-assistive-text">Arrow down</span>
  </button>
</div>
</div>
</apex:pageBlockSection>
 </apex:outputPanel> 
  </apex:pageBlock>
   </apex:form>
    </apex:page>

1 Answer 1

1

Why don't you opt ALJS plugin which can help you implement the multi-select picklist with ease?

I have used it in VF page and it works fine. Here is the link to it: https://salesforcekinks.wordpress.com/2016/12/10/slds-forms-components-using-jquery-aljs/

Kindly refer and let me know if you have any questions? Thanks

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.