Wrong position in bootstrap modal

[paradisehuman]

Hi. 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 :

Upload your picture and crop it.

        </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 ? I remove these from the file but it didn't work. /* Also check if any of the ancestor elements has fixed position */

•    if ($p.css('position') == 'fixed')
  

•        position = 'fixed';
  

[paradisehuman]

I solved this My self... Refer to this link : Fix #39

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

[acechase]

FWIW, I needed to make an additional change (in addition to removing position="fixed") for this to work in my bootstrap v3.0 modal.

If I passed in the parent then the offsets were being based off the body rather than off the modal container. Passing in the img.offsetParent as the parent element almost fixed it since the offsets were then correct, but the elements were then appended at the wrong place in the DOM.

The way I eventually got it working was passing in img.parent() as my parent, but then in the adjust() function I needed to use the img's offsetParent rather than parent to get the correct offsets. My diff looks like:

+++ b/EatWith/static/lib/jquery.imgareaselect/jquery.imgareaselect-0.9.10.js
@@ -146,9 +146,10 @@ $.imgAreaSelect = function (img, options) {
             imgOfs.left += max(document.body.scrollLeft, docElem.scrollLeft);
         }

-        parOfs = /absolute|relative/.test($parent.css('position')) ?
-            { left: round($parent.offset().left) - $parent.scrollLeft(),
-                top: round($parent.offset().top) - $parent.scrollTop() } :
+        var offsetParent = $parent.offsetParent();
+        parOfs = /absolute|relative/.test(offsetParent.css('position')) ?
+            { left: round(offsetParent.offset().left) - offsetParent.scrollLeft(),
+                top: round(offsetParent.offset().top) - offsetParent.scrollTop() } :