Lightning ComponentとLightning Design Systemを使ってSalesforce1アプリ開発を試していたのですが、モーダルコンポーネントの表示がうまくいかずハマってしまいました。
どのような問題かというと、ページの高さがけっこうある状態でモーダル表示を行うと上部分に大きなスペースができてしまいました。これだとモーダルがどこに表示されているのか見つけるのに苦労してしまいます。
また、ページの高さが小さい場合、モーダル枠が自動で小さいサイズに変更してくれるのですが、そのとき枠内のスクロールが効かない状態となっていました。
この現象はSalesforce1モードに切り替えたPC端末とSalesforce1モバイルアプリの両方で発生しています。
モーダルコンポーネントの使い方を間違えているのかなといろいろ試していたのですが、原因がわかりませんでした。そこでSalesforce1環境以外で試すことができるLightningアプリケーションで動かしてみました。
するとS1ではうまくいかなかったところが、Lightningアプリケーションでは次のようにきれいに表示することができました。
ページ高さが小さいときに利用できるスクロール機能も問題なく動作します。
使い方が間違っている、またはS1専用の対応方法が用意されているかもしれませんが、ひとまずSalesforce1アプリでLightning Design Systemのモーダル表示を行うとこういった問題が発生しました。
Lightning Design Systemのバージョンは現在0.9.1なので、もしかするとバージョン1になる頃には解決してるかもしれません。