I need to resize the chart in each row : left (start_cell)- start date increase/decrease , right(end_cell) - end date increase/decrease.
Each cell indicates each month. For each row, the chart plotting start cell(also end cell) may vary based on the product start date and end date.
Here , I can resize the chart to the left for start cell correctly, and for end cell to the right. But, I cannot resize the chart to the next right cell for start cell, and for end cell it cannot move to the left cell.Up to the cell border(just days within the same month) the resizing span is moving.
<div id="chart_row_<%=id%>" class="chart_outer">
<%@date_hash.each do |date,mth_yr|%>
<%cell_type,cell_width,background_class,left_margin,gantt_color = find_type_width_and_background_color(dates_between_array,mth_yr,h_dates,entity,@review_type)%>
<div style="position:relative;">
<%case(cell_type)%>
<%when "start_cell"%>
<span class="<%=background_class%> <%=cell_type%>" style="width:<%=cell_width%>%;margin-left:<%=left_margin%>%;background: <%=chart_color%>;font-size:10px;"> </span>
<%when "end_cell"%>
<span class="<%=background_class%> <%=cell_type%>" style="width:<%=cell_width%>%;background: <%=chart_color%>;" </span>
<%when "normal_cell"%>
<%if (background_class == "bar_chart_color_class")%>
<span class="<%=background_class%> <%=cell_type%> cell_style_map_bar_char" style="background: <%=chart_color%>;"></span>
<%else%>
<span class="<%=cell_type%> cell_style_chart" style="background: <%=chart_color%>"></span>
<%end%>
<%end%>
</div>
<%end%>
</div>
<script>
$(function() {
$(".start_cell").resizable({
handles: "w", //the edges that are used for resizing
start: function(event, ui) {
start_pos = getDimensions(event,ui);
},
stop: function(event, ui) {
submitResizeParams(event,ui);
}
});
}
Please help,
Thanks