Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

191
Views
jquery UI resizable - resizing only possible upto the parent div

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!