2017-02-12 15 views
1

問題:以下のプロットは、部分的にフルスクリーンです。全画面表示で、この要素を拡大して画面の表示可能領域全体を埋めるにはどうすればよいですか?要素が完全にフルスクリーンにならない

Plot in fullscreen

フルスクリーン機能私が使用しています:フルスクリーンへ

function toggleFullscreen(elem) { //function to make element (cell) fullscreen on most browsers 
     elem = elem || document.documentElement; 
     if (!document.fullscreenElement && !document.mozFullScreenElement && 
     !document.webkitFullscreenElement && !document.msFullscreenElement) { 
     if (elem.requestFullscreen) { 
      elem.requestFullscreen(); 
     } else if (elem.msRequestFullscreen) { 
      elem.msRequestFullscreen(); 
     } else if (elem.mozRequestFullScreen) { 
      elem.mozRequestFullScreen(); 
     } else if (elem.webkitRequestFullscreen) { 
      elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
     } 
     } 
    } 

コールバック:

var $saved_cell = $('.cell.code_cell.rendered.selected > div.output_wrapper > div.output > div > div.output_subarea.output_html.rendered_html'); 

$saved_cell.each(
     function() { toggleFullscreen(this) }).css({ 
      'background-color' : 'rgb(244,244,244)', 
      'position': 'absolute', 
      'z-index': '9999', 
      'min-width': '100%', 
      'height': '100vh', 
      'margin': '0', 
      'padding': '0', 
      'overflow': 'auto' 
     }); //expand selected cell 

はまた、ここで選択した要素の周りのDOMのスクリーンショットです:

DOM

答えて

0

グラフィックス<svg>アイテム自体に設定されている幅と高さを変更または削除する必要があります。 divを大きくするだけで自動的にグラフィックのサイズが変更されることはありません。

私の意見では、<div class="svg-container" ...>の子ノードをコピーして、それを100%表示するか別のコンテナに入れることができます。幅と高さがコピーされた<svg>要素の上に表示され、固定されず、全画面表示に切り替わります。この方法で、おそらく維持したいと思う「通常の」ビューを台無しにすることはありません。

あなたは(代わりにその厄介な構造を歩くしようとする)上記は、div要素を取得するjQueryの.find().clone()を使用して、あなたが100%で表示したい空間にコピーを作成することができます。それから、あなたが望むように幅と高さを<svg>で操作します。

関連する問題