tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:Lightning Design SystemのModalとSalesforce1モバイルについて

Lightning ComponentとLightning Design Systemを使ってSalesforce1アプリ開発を試していたのですが、モーダルコンポーネントの表示がうまくいかずハマってしまいました。


どのような問題かというと、ページの高さがけっこうある状態でモーダル表示を行うと上部分に大きなスペースができてしまいました。これだとモーダルがどこに表示されているのか見つけるのに苦労してしまいます。

f:id:tyoshikawa1106:20150921234306p:plain


また、ページの高さが小さい場合、モーダル枠が自動で小さいサイズに変更してくれるのですが、そのとき枠内のスクロールが効かない状態となっていました。

f:id:tyoshikawa1106:20150921234647p:plain


この現象はSalesforce1モードに切り替えたPC端末とSalesforce1モバイルアプリの両方で発生しています。


モーダルコンポーネントの使い方を間違えているのかなといろいろ試していたのですが、原因がわかりませんでした。そこでSalesforce1環境以外で試すことができるLightningアプリケーションで動かしてみました。
f:id:tyoshikawa1106:20150921235928p:plain


するとS1ではうまくいかなかったところが、Lightningアプリケーションでは次のようにきれいに表示することができました。
f:id:tyoshikawa1106:20150921235109p:plain


ページ高さが小さいときに利用できるスクロール機能も問題なく動作します。
f:id:tyoshikawa1106:20150921235140p:plain


使い方が間違っている、またはS1専用の対応方法が用意されているかもしれませんが、ひとまずSalesforce1アプリでLightning Design Systemのモーダル表示を行うとこういった問題が発生しました。


Lightning Design Systemのバージョンは現在0.9.1なので、もしかするとバージョン1になる頃には解決してるかもしれません。