Crop Area Overlaps/Covers Preview in Firefox
jared12 - June 13, 2009 - 04:08
| Project: | Imagefield Crop |
| Version: | 6.x-1.0-rc1 |
| Component: | User interface |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Description
There seems to be a display issue in Firefox. It works great as long as the "The resolution to crop the image onto" is kept fairly narrow. However once the width resolution gets up to about 390 the Crop Area begins to overlap the preview. If the Crop Area is larger than the preview, it can potentially completely cover it. At least that has been my experience.
Firefox 3.0.10.0
Drupal 6.12
ImageAPI 6.x-1.6
FileField 6.x-3.0
ImageField 6.x-3.0
Image crop 6.x-1.x-dev AND Image crop 6.x-1.0-beta3
| Attachment | Size |
|---|---|
| CropAreaOverlap.jpg | 113.83 KB |
#1
Got that issue too.
A quick-fix would be nice :-)
#2
me too
#3
It is an issue with the filefield module and your theme actually, as the filefield module adds CSS which does this:
filefield.css, lines 27-38:
.filefield-element .widget-preview {
float: left; /* RTL */
padding-right: 10px; /* RTL */
border-right: 1px solid #CCC; /* RTL */
margin-right: 10px; /* RTL */
max-width: 30%;
}
.filefield-element .widget-edit {
float: left; /* RTL */
max-width: 70%;
}
It's the
floatattributes here that are the cause of your problem. To fix it, add this in your theme's CSS:.filefield-element .widget-preview,.filefield-element .widget-edit {
float: none;
}
Note that this may break other filefield widgets or make them look funny. To work around this, you need to be more specific in your CSS, for example:
#edit-field-crop-image-0-ahah-wrapper .filefield-element .widget-preview,#edit-field-crop-image-0-ahah-wrapper .filefield-element .widget-edit {
float: none;
}
Note that the id attribute used here (
#edit-field-crop-image-0-ahah-wrapper) is on a node type with only one imagefield_crop widget. If you have more of those widgets (ie. more than one imagefield_crop field) on the same node type, you have to add more lines of css with for example#edit-field-crop-image-1-ahah-wrapper ...and so on (increasing the number, which starts at 0, not 1 for the first widget).#4
I am experiencing the same issue however for me the crop area and marquee do not get displayed. I have incorporated the float:none fix above which enables the 'Crop area:' to render beneath the photo but still not working. Screenshot attached.
Any help appreciated. This issue doesn't occur for me on localhost... only on my web host.
#5
Subscribe.
Croppable image also overlaps the final image on my site.