JCrop resizing the image not cropping - Javascript

Question

I am trying to use JCrop to crop an image. However the results are frustratingly wrong and I am not sure why. I have an image uploader that when someone selects in image a javascript changes the source of an image already on the page to match the newly upload image. I then have this code:

$('#myForm').ajaxForm({
    dataType: 'json',
    success: function (result) {
        $("#image-editor-preview img")
            .attr("src", "/Profiles/AvatarWorker/" + _id + "?random=" + Math.random())
                        .Jcrop({
                            aspectRatio: 1,
                            setSelect: [100, 100, 50, 50],
                            minSize: [160, 160],
                            maxSize: [160, 160],
                            onChange: setCoords,
                            onSelect: setCoords
                        });
    }
});

var x = 0, y = 0, w = 0, h = 0;
function setCoords(c) {
    x = c.x;
    y = c.y;
    w = c.w;
    h = c.h;
};

However this is what happens:

I have tried tried quite a bit to fix this but the end results are ALWAYS the same. Anyone have any ideas? Thanks.

Answer 1

I was able to figure it out. Turns out that JCrop inside a twitter bootstrap modal has an issue with the width of the JCrop box. The twitter bootstrap modal is overriding the CSS inside the JCrop css. Had to modify the CSS in JCrop to not have this happen.