読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

salesforce.com Lightning

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

f:id:tyoshikawa1106:20150921040437p:plain


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

<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>


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


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

slds-dropdown--left

f:id:tyoshikawa1106:20150921041844p:plain


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

slds-dropdown--right


無事に右寄せ表示に変更されました。
f:id:tyoshikawa1106:20150921042022p:plain


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