Wrong position imgAreaSelect plugin in bootstrap modal window

Question

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").

Answer 1

Had same problem. solution was:

parent:$('.modal-content')

you need to set modal content as parent not image container.

Answer 2

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';

Answer 3

There are several scenarios that bootstrap.css can affect your imgareaselect. For me setting box-sizing:content-box on the image fixed my problem.

<img id="cartPhoto" class="cartImageThumb" style="box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;">

I prefer to overwrite the css inline vs modifying the bootstrap.css file because those chan it can affect the whole system.

If you run into issues with bootstrap.css affecting your code, comment out sections of bootstrap.css until you find which style is affecting you.