youmoula / jcrop

Automatically exported from code.google.com/p/jcrop
0 stars 0 forks source link

Visible radio button in IE 8 Quirks Mode #67

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago
What steps will reproduce the problem?
1. IE 8 running in Quirks mode.
2. jCrop initialized in a modal dialog created via AJAX.

What is the expected output? What do you see instead?
Normal jCrop operation is expected.  Instead I get a seemingly pointless radio 
button in the top-left corner of the jCrop box, shifting the image slightly to 
the right.  Clicking the jCrop box alternately makes this radio button 
disappear and reappear, shifting the image back and forth each time.

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

jquery.Jcrop.min.js v0.9.9 (build:20110607)
IE 8 on Windows Vista / Windows 7

Please provide any additional information below.

Functioning solution is to hack jquery.Jcrop.min.js and change

$('<input type="radio" />').css({position:'fixed',left:'-120px',width:'12px'})

to

$('<input type="radio" 
/>').css({position:'fixed',left:'-120px',width:'0',height:'0'})

giving the radio button a width and height of 0.

Original issue reported on code.google.com by JianHouZi on 6 Jan 2012 at 7:56

GoogleCodeExporter commented 8 years ago
Didn't work for me. When trying to play around, I changed all the "radio" input 
types to "hidden" and that worked. 

But cannot tell, what these inputs really do, I use the JCrop only in thumbnail 
mode.

Original comment by citysh...@cityshark.cz on 16 Jan 2012 at 12:09

GoogleCodeExporter commented 8 years ago
Same problem with me using IE 9 on Windows 7, the 0 width solution works for me.
Thanks

Original comment by arandjel...@gmail.com on 8 Feb 2012 at 3:14

GoogleCodeExporter commented 8 years ago
Ran into this same problem in IE9. Setting the width to 0px fixed it for me.

Original comment by g.gsimp...@gmail.com on 27 Feb 2012 at 5:08

GoogleCodeExporter commented 8 years ago
In retrospect, the issue may have been caused by other styles on the website I 
was working on; it had all sorts of horrible "default" styles like this one:
input[type=radio]
{
  float: left;
  width: auto;
  margin: 0 3px 7px 0;
}
which screwed up in-line labels (for which the horrible compensation was "label 
{ display: block; }").

Original comment by JianHouZi on 14 Sep 2012 at 7:37

GoogleCodeExporter commented 8 years ago
Not sure why that radio button is there, but his css rule fix worked for me 
without have to tweak the jcrop code.

.jcrop-holder input[type='radio']{ display: none; }

Original comment by kiwigrow...@gmail.com on 24 Jun 2013 at 5:06