Элемент не полностью полноэкранный

Question

Проблема: сюжет ниже частично частично в полноэкранном режиме. Как растянуть этот элемент, чтобы заполнить всю видимую область экрана в полноэкранном режиме?

полноэкранное функция Я использую:

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 вокруг выбранного элемента:

Answer 1

Вам необходимо изменить или удалить ширину и высоту, которые установлены на графике <svg>. Просто сделать div больше не будет автоматически изменять размер графики.

Альтернативный подход, который, вероятно, будет проще (на мой взгляд), состоит в том, чтобы скопировать дочерние узлы из <div class="svg-container" ...> и поместить их в другой контейнер, который может быть на 100%, что вы можете просто показать/скрыть, изменить ширину и высоту на скопированных элементах <svg>, чтобы они не были зафиксированы и переключили вид в полноэкранном режиме. Таким образом, вы не испортите «нормальный» вид, который, вероятно, захочет поддерживать.

Вы можете использовать JQuery-х .find() и .clone(), чтобы добраться до DIV упомянутого выше (вместо того, чтобы пытаться пройти эту неприятную структуру) и сделайте копию в пространстве вы хотите показать на 100%. Затем используйте ширину и высоту <svg> по вашему желанию.