小さな画面でMy Railsモーダルウィンドウが完全に表示されない

Question

私はRails 4.2.7を使用しています。私は...

<%= link_to_modal 'Add Race', "#add_form", :class=>'modal_button' %> 

次のスタイルは、フォームに適用されます...私は、ユーザーがリンクをクリックモーダルダイアログを起動するために、これを設定している

gem 'jquery-modal-rails' 

私のGemfileでこれを使用してい

#add_form { 
    display: none; 
    -moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow:   inset 0 0 10px #000000; 
    padding: 20px; 
    background-color: #f0f0f0; 
} 

小さな画面（e..gモバイルブラウザ）では、モーダルウィンドウの一部が画面外に表示され、それらの部分にアクセスできるスクロールバーがありません。モーダルウィンドウを完全に表示するのに十分なスペースがない場合、モーダルウィンドウが使用可能なスクリーンの不動産だけを占めるようにする方法はありますか？

編集：コメントに応じて、これは提案されたスタイルを追加するような画面です。私はこのショットをあげる

Answer 1

...それでもダイアログが表示されていないか、まったくスクロールします。

私はオンラインのデザイナーをたくさん積み重ねたレイヤーを作成し、何も縮小しないで、すべてのレイヤーを適切にサイズ変更して作成します。

これに基づいて、私はあなたのためにこのようなコードを提案します。

あなたはスクリーンショットしか見ることができません。

@media screen and (max-width: 480px) { 
    #add_form { 
    display: none; 
    background-color: #f0f0f0; 
    -moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow: inset 0 0 10px #000000; 
    padding: 0 0 56.25% 0; 
    overflow: hidden; 
    max-width: 98%; 
    height: 98%; 
    top: 1%; 
    left: 1%; 
    font-size: 3vw; 

    } 
}