2

I want to display a field status in a very visual way, the path component is ideal (any of them, for example lightning:path or even the slds one):

enter image description here

Problem:

Displaying that component from right to left (trying to change the dirhtml attribute) results:

enter image description here

Code:

<div dir="ltr">
    <lightning:picklistPath aura:id="picklistPath"
                            recordId="{!v.recordId}"
                            variant="linear"
                            picklistFieldApiName="Status__c"
                            onselect="{!c.selectPathStage}"/>
</div>

for changing from left-to-right to right-to-left I change the dir="ltr" to dir="rtl"

Questions

  1. Is there any way to show this path in rtl? (even a css solution would be great)
  2. If not - is there any other component or visual way to show all stages and emphasize your current stage?

1 Answer 1

0

If you are properly able to scope the CSS, you should maybe be able to apply a solution similar to reverse the order of div's children. Otherwise, this will require you code a custom component that fits your specific requirement.

modern browsers now support the following for reversing (mirroring) elements (using Flex):

#parent {
  display: flex;
  flex-direction: column-reverse;
}

I believe SLDS also has some reversing capabilities (if the child elements are in a grid) --> slds-grid_reverse

2
  • reversing the elements do not work on this component - direction here is within the component visually. I do not want to create my own custom component for that, I was wondering if there is a solution or maybe other visual component that can help me... Feb 22, 2018 at 12:26
  • No out of the box solution to my knowledge
    – glls
    Feb 22, 2018 at 12:59

You must log in to answer this question.

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