CSS 표와 상위 div가 높이 및 너비 특성을 따르지 않습니까? Jquery 크기를 조정할 수

Question

div (graphdiv) 안에 div (반) 안에 테이블 (graphtable)이 있습니다.

jquery 크기 조정이 가능한 graphtable과 graphdiv를 사용하여 크기를 절반으로 줄일 때 크기가 커집니다. 그러나 Google 개발자 도구를 사용하면 이러한 요소의 실제 CSS가 올바른 크기로 변경됩니다.

가장 낮은 div 테이블 안에는 크기 조정 기능이 클래스에서 호출 될 때 상위에 크기 조정해야하는 다이 그래프가 있습니다.

나는 CSS가 한 가지를 말할 수있는 방법을 잃었으며 다른 것을 볼 수 있다고 생각하니?

for(var i = 0; i<graphArray.length-1; i++){ 
    $("#"+i).resize(function() { 
     var height = $(this).height(); 
     var width = $(this).width(); 
     $(this).find(".graph").height(height); 
     $(this).find(".graph").width(width*0.68); 
     $(this).find(".graph").find(".graphtable").height(height); 
     $(this).find(".graph").find(".graphtable").width(width*0.68); 
     window.graphArray[$(this).attr('id')].resize(); 
    }); 
} 

.half{ 
background-color:#F2F2F2; 
width:48%; 
height:50%; 
border: 1px solid; 
margin-top:1%; 
float:left; 
} 
.graph{ 
width: 68%; 
height: 100%; 
float: left; 
display:table; 
} 
.graphtable{ 
background-color:#F5F5F5; 
width:100%; 
height:100%; 
} 

<?php 
echo "<div class='half' id='$i' name='".$graph['graph_id']."' style='position:absolute; top:".$top."px; left:".$left."px'>"; 
echo "<div id='graph' class='graph'>"; 
echo "<table id='graphtable$i' class='graphtable' style='width:100%; height:100%'></table>"; 
echo '</div>'; 
echo '<div class="dragger">Drag</div>'; 
echo '<div class="resizer">+</div>'; 
echo '</div>'; 
?> 

내가 그래프 사업부와 graphTable뿐만 아니라,하지만 행운을 모두 .atrr 사용 tride이

.

Answer 1

분명히 dygraph가 바인드 된 추가 div가 있으므로 크기 조정 문제를 해결하기 위해 아래 두 줄을 추가했습니다. 나는 여기서 한 일을 할 수있는 더 좋은 방법이있을 것이라고 확신하지만, 지금은 효과가있다. 내가

for(var i = 0; i<graphArray.length-1; i++){ 
    $("#"+i).resize(function() { 
     var height = $(this).height(); 
     var width = $(this).width(); 
     $(this).find(".graph").height(height); 
     $(this).find(".graph").width(width*0.68); 
     $(this).find(".graph").find(".graphtable").height(height); 
     $(this).find(".graph").find(".graphtable").width(width*0.68); 
     $(this).find(".graph").find(".graphtable").find("div").width(width*0.68); //added 
     $(this).find(".graph").find(".graphtable").find("div").height(height); //added 
     window.graphArray[$(this).attr('id')].resize(); 
    }); 
} 

Answer 2

dygraphs는 창의 크기가 조정될 때만 다시 그립니다. (불행하게도, 일반적인 크기의 <div> 크기를들을 수있는 이벤트는 없습니다.)

dygraph에서 resize()을 호출하여 포함 된 div를 다시 검사하도록 할 수 있습니다.