JQuery UIダイアログ - ダイアログボックスの下に不要なスペース

Question

私はシンプルなtic-tac-toeアプリケーションを開発し、CodePenでビルドしています。ユーザーがドローを失い、または無理にするように設計されている場合、jqueryのUIダイアログボックスがポップアップして、その結果をユーザーに通知します。私が持っている問題は、これが起こると、ページの右側にスクロールバーが表示される大きな空白が表示されることです。これは小さな詳細ですが、修正したいと思います。私は本体にoverflow: hiddenを入れることができません。なぜなら、ユーザーは小さな画面やサイズ変更されたブラウザウィンドウでスクロールすることができないからです。調整ダイアログボックス

の高さを調整するだけで

.ui-dialogに

• overflow: hiddenルールを入れて画面
• のに非常にトップダイアログの位置を調整する：私はすでに無駄に次のことを試してみました.ui-dialog
• のmargin-bottomは、彼らが

原因だったかどうかを確認するために、他のダイアログのオプションをいじり

これらのうちのいくつかは遠くに見えましたが、ここに来る前に思っていたことをすべて試してみたかったのです。研究は何も変えていない。私はChromeを実行しています。問題のペンはhttp://codepen.io/no_stack_dub_sack/pen/YGNRxOにあります。

これについてのお手伝いをさせていただきます。前もって感謝します。

もう少し詳しく説明しますが、ほとんどの画面でスクロールせずに1ページにすべて収まるので、できるだけきれいにしておきたいと思います。

は、ここでは、コードです：どこかのダイアログ作成プロセスにおける

// DIALOG BOXES 

     $('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>'); 
     $('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>'); 
     $('.gameOver').dialog({ 
     autoOpen: false, 
     resizable: false, 
     height: 120, 
     dialogClass: 'no-close', 
     buttons: { 
      'Play Again?': function() { 
      $('.gameOver').dialog('close'); 
      setNewGame(); 
      } 
     } 
     }); 

Answer 1

、位置があなたのゲームの高さが空のギャップを与えるダイアログを、計算になり、ダイアログ、上の相対的に設定されています。あなたは、単にCSSで絶対にUI-ダイアログの位置を設定することができ、それが問題を解決します：

.ui-dialog { 
    position: absolute; 
    box-shadow: 1px 1px 30px 5px; 
    background: #04A777; 
    border-radius: 10px; 
    outline: none; 
    overflow: hidden; 
    margin-top: none; 
} 

http://codepen.io/anon/pen/EgmoGZ