SFDC：Lightning Design SystemのDropdownsコンポーネント表示位置

Lightning Design Systemに用意されているDropdownsコンポーネントはマウスオーバー時にメニューを表示することができるコンポーネントです。

メニュー部分の処理はこんな感じになっています。

<div class="slds-dropdown slds-dropdown--left slds-dropdown--actions slds-dropdown--menu">
  <ul class="slds-dropdown__list" role="menu">
    <li id="menu-13-0" href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Action One</a></li>
    <li id="menu-14-1" href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Action Two</a></li>
    <li id="menu-15-2" href="#" class="slds-dropdown__item"><a href="#" class="slds-truncate" role="menuitem">Action Three</a></li>
  </ul>
</div>

これを画面右端の方で利用したところ次のように表示範囲内に収まらず、一部表示されませんでした。

通常左寄せで表示されている感じなので右寄せにできないか確認してみたところ、次のclass指定で制御されていました。

slds-dropdown--left

これを次のように変更してあげると・・・

slds-dropdown--right

無事に右寄せ表示に変更されました。

Dropdownsの表示位置で困ったときはこうやって調整すればいいみたいです。