Twitter bootstrap styles conflict with image.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Apply twitter bootstrap styles
2. Apply Jcrop
3. Select and drag over an area

What is the expected output? What do you see instead?
You should see the image highlighted and indistinguishable from the first 
image, but instead the image inside the selected area will have a strange width.

What version of the product are you using? On what operating system?

Please provide any additional information below.
Provide inline styles to set max-width to none. Twitter bootstrap sets it to 
100%, which causes the above issue.

Original issue reported on code.google.com by si...@clearsightdesign.com on 23 Jul 2012 at 10:03

Attachments:

• [Screen Shot 2012-07-23 at 3.02.57 PM.png](https://storage.googleapis.com/google-code-attachments/jcrop/issue-79/comment-0/Screen Shot 2012-07-23 at 3.02.57 PM.png)

[GoogleCodeExporter]

Same problem here. How to solve it? In which selector i have to set max-width 
to none?

Original comment by guilherm...@gmail.com on 16 Aug 2012 at 5:32

[GoogleCodeExporter]

I have set all of the images Jcrop creates to max-width: none by way of a 
cascading selector.

If that doesn't work for you, or you need a set width for some reason, I would 
either try setting the widths on each of the images individually, or set the 
width on a bounding div.

Original comment by si...@clearsightdesign.com on 16 Aug 2012 at 5:46

[GoogleCodeExporter]

I just did a little testing on the Jcrop demo, setting the images to max-width: 
100% in succession, and found that it was the first image inside of the div 
`jcrop-holder`.

So the structure is like so:
<original image>
<div class="jcrop-holder">
   <div>
        <div>
          <image to set max-width: none>
        </div>
   </div>
</div>

Original comment by si...@clearsightdesign.com on 16 Aug 2012 at 5:52

[GoogleCodeExporter]

Adding the max-width: none to the images work and the cropped image is shown ok 
now, but the other error I am expecting with this is that when I mouse over the 
cropped region the cursor doesn't change to the arrows and can not move the 
cropped region around the image.

Anyone else having this same problem?

Original comment by Ber...@arenaflowers.com on 27 Nov 2012 at 12:38

[GoogleCodeExporter]

It sounds like you either have conflicting styles, incorrect markup, or the 
Jcrop javascript isn't loading correctly. Which says nothing really. :P

Can you provide some code? Maybe some screenshots of the issue?

Original comment by si...@clearsightdesign.com on 27 Nov 2012 at 5:04

[GoogleCodeExporter]

I was facing the same problem. This has been fixed. I upgraded from Jcrop 
v0.9.8 to v0.9.12 and its working perfect!

@Tapmodo has fixed this and commented on this issue. 
https://github.com/twitter/bootstrap/issues/1649

Original comment by kulkarni...@gmail.com on 25 Feb 2013 at 3:06