Setting height and width Dynamically using Jquery not reflected. Getting values from

[Amol1]

Step 1. I am dragging and dropping some items in a div.
Step 2. Item size is auto resizing according to the available space by an auto zoom-out functionality.


Step 3. Now when I again zoom-in, the width/height of the parent div should adjust to reflect the scroll effect. For that I am setting the width and height dynamically on click of zoom-out/zoom-in buttons.

   
     $('#container').css('width','');
    	$('#container').css('height','');
    	var maxlist = max_group_filter('#container');
    	var total_list = list_count('#container')+1;
    	
    	
    	var boxWidth = $('#container').find('.column ').outerWidth()+20;
    	boxWidth = boxWidth * total_list;
    	
    	
    	var boxHeight = $('#container').find('.sortable-item').outerHeight()+20;
    	boxHeight = boxHeight * maxlist;
    	
    		
    	$('#container').css('width',boxWidth);
    	$('#container').css('height',boxHeight);
    if(scrollbar=="new"){
    		updateScrollbar('#container', 'new');
    	}else {
    		updateScrollbar('#container', 'update');
    	}

My updateScrollbar(), is working fine but the problem I am facing is that when I am clicking on the zoom buttons for the first time, the width and height values are adjusted according to the previous zoom values. It's getting updated on the second click of the zoom button. I tried to remove the zoom cache by using .removeData().

$('#container').removeData('data-zoom');

But this is not effecting the cache clear.

Step 4. The Catch I am facing is that when I try to debug the script using Firebug, the values are working fine and thus the scroll works fine. But without debug mode it's again a failure.

Step 5. I also tried to update the properties using SetTimeout and .done function but failed.

    $('#container').find('.column ').each(function(index, element){
    		boxeswidth += $(element).outerWidth() + 20;
    	}).promise().done( function(){	
    		$('#container').css('width',boxWidth);
    	$('#container').css('height',boxHeight);
    	
    	 });

But above code also failed. The only reason I have understood by far that jQuery is taking the values for zoom functionality from previous state. I am defining the zoom by using "data-zoom" attribute as below.

    .droppedArea[data-zoom="1"] .column{
    	transition :all 0.2s ease;
    	width:25px;
    	font-size:0.3vw;
    	line-height:0.1em;
    	margin-right:1px;
    	
    }
    .droppedArea[data-zoom="2"] .column{
    	transition :all 0.2s ease;
    	width:35px;
    	font-size:0.4vw;
    	line-height:0.2em;
    }