요소 추가 - 요소가 컨테이너 오버플로를 시작할 때 추가 중단

Question

임은 벽돌을 사용하여 다양한 크기의 요소를 추가 할 수있는 "보드"를 정렬하려고 시도하고 있으며 새로운 요소를 추가 할 가능성을 막는 방법을 찾는 중입니다. 컨테이너가 가득 차고 요소가 오버플로하기 시작하면

코드 :

HTML은 요소 (.box)을 첨가

<input id="width" value="0" type="text"></input> 
<input id="height" value="0" type="text"></input> 
<input id="mLeft" value="0" type="text"></input> 
<input id="mRight" value="0"type="text"></input> 
<button>Add container</button> 

jQuery를

$('button').click(function(){ 
    var $pWidth = jQuery("#width").val(); 
    var $truePWidth = $pWidth * 15; 
    var $pHeight = jQuery("#height").val(); 
    var $truePHeight = $pHeight * 15; 
    var $mLeft = jQuery("#mLeft").val(); 
    var $trueMLeft = $mLeft * 15; 
    var $mRight = jQuery('#mRight').val(); 
    var $trueMRight = $mRight * 15; 
    $container.append("<div class='box'><div class='remove'></div></div>").masonry('reload', function(){ 
      $(".box").each(function(i) { 
       $(this).attr("id", "item"+(i+1)); 
      }); 
     $($container).children('.box:last-child').css({'height' : $truePHeight + 'px', 'width': $truePWidth + 'px', 'margin-right' : $trueMRight + 'px', 'margin-left' : $trueMLeft + 'px' }); 
     $container.masonry('reload'); 
    }); 

}); 

용기 (VAR을 $ 용기 = #container)이 높은 49 픽셀이고 .

미리 감사드립니다.

/joa

Answer 1

사과드립니다.

.box { 
    max-height: 1600px; 
    overflow-y: scroll; 
} 

이 컨테이너를 스크롤 막대를주는 대신 컨테이너 동안의 높이를 확장하는 것입니다 : 그래서 내가 코드를 할 수는 없지만 다음과 같이 단순히 컨테이너의 CSS를 설정할 수 있습니다 내 전화 해요 여전히 사용자가 상자를 무제한으로 추가 할 수 있습니다.