Wrong position imgAreaSelect plugin in bootstrap modal window

css, html, javascript, jquery, twitter-bootstrap

Solution

I mean the parent div of Image that you want to use image area select on it , must be position relative .

 <div id="thumbBox" style="position:relative;">
     <img id="thumb" class="img-responsive" />
   </div>

And We must remove these lines from jquery.imageareaselect.js :

/* Also check if any of the ancestor elements has fixed position */ 
        if ($p.css('position') == 'fixed')
           position = 'fixed';

Problem

I have a problem with imgAreaSelect plugin in Bootstrap. I set parent in initializing imgAreaSelect to prevent scroll moving area : ``` thumb.imgAreaSelect({ handles: true, aspectRatio: '1:1', fadeSpeed: 300, parent: "#thumbBox" }) ``` and this is my html : ``` <div class="modal-body"> <div class="row"> <div class="col-xs-12" style="font-weight:bold;"> Upload your picture and crop it. </div> </div> <div class="row"> <div class="col-xs-12"> <div id="thumbBox"> <img id="thumb" class="img-responsive" /> </div> </div> </div> ``` whene I trying to select an area,ImgAreaSelect selects an area outside the picture but points ( I mean x1,x2 etc) are exactly that I want(the functionality works correct but in interface there is problem). In smaller devices's,ImgAreaSelect interface is nit but in some situation it mess up ! I used to search a lot but i didn't find anything useful. How can i fix this problem ? UPDATE : I solved this My self... Refer to this link : github We must remove these lines from code : ``` /* Also check if any of the ancestor elements has fixed position */ if ($p.css('position') == 'fixed') position = 'fixed'; ``` And we must position relative the parent box that we initialized ourselves( parent: "#thumbBox").

Original source