1

I am new to lightning design system.

I am using a responsive data table for both directions:

  • lrt
  • rtl

The horizontal table is working perfectly fine in both direction.

But in the vertical table view, rtl direction is not working. The vertical table is automatically comes based on view(responsive table).

I am trying to find documentation for this, but not getting any clue or help from the documentation. 

<table class="slds-table slds-table--bordered slds-table--cell-buffer">
    <thead>
        <tr>
             <th scope="col" ng-repeat='val in data' ng-hide='!val.isDisp'>
                <div class="slds-truncate">{{::val}}</div>
            </th>
            <th width="70px"/>
        </tr>
    </thead>
    <tbody class='slds-block_table-body'>
        <tr name="form">
            <td ng-style="{'padding':'0px'}">
                <span class="icon-save"></span>
            </td>
            <td ng-repeat='row in details'>
               {{::row}}
            </td>
        </tr>
    </tbody>
</table>

Please suggest how it can achieve for the vertical view.

Improve this question
2
  • Could you please post your code? Commented Aug 10, 2017 at 15:31
  • @MartinLezer, I have added code. thanks for your time. Commented Aug 10, 2017 at 16:25

1 Answer 1

Reset to default
0

Firstly the Lightning Design System doesn't support RTL out of the box: https://github.com/salesforce-ux/design-system/issues/308

At Vlocity we've added support, but it's not been merged in to SLDS as there have been questions and concerns about different approaches. For example see this PR for 2.2.x https://github.com/salesforce-ux/design-system/pull/438

However you can use our branch which is currently aligned with SLDS 2.2.3 (we're a little behind the latest): https://github.com/vlocityinc/design-system/tree/mgoldspink_Salesforce/master

To make this work, you need to sync up the branch and build the code as per the standard build docs for SLDS. This will generate additional .rtl.css files. In our visualforce pages we detect that language of the User using:

public static Boolean isLanguageRTL() {
    String language = UserInfo.getLanguage();
    if (language == 'iw' ||
        language == 'ar' ||
        language == 'ur') {
            return true;
    }

    return false;
}

Then in our VF pages we add the following logic to include the right stylesheet:

      <apex:stylesheet value="{!IF(isLanguageRTL, URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system-vf.rtl.min.css'), URLFOR($Resource.slds, '/assets/styles/salesforce-lightning-design-system-vf.min.css'))}"/>

Then the final missing piece is that element needs the slds-max-medium-table--stacked-horizontal class:

<table class="slds-table slds-table--bordered slds-table--cell-buffer slds-max-medium-table--stacked-horizontal">
Improve this answer
0

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.