Larger images disappear behind admin menu

Thanks for your bug report, I'll see if I can do something about that as soon as possible.

I was doing some tests and until now I can't reproduce this issue, neither on Safari, Firefox or Chrome. Are you still having this? Can you please check if you have any modules installed that modify the admin bar?

Thanks! And sorry for the long wait.

This happened for me right now when testing this module (7.x-1.2). The image wasn't even that big (640x425). I also have the shortcuts bar visible on the admin menu. If I close that one it still goes about 2-3 pixels below the admin menu.

Using latest chrome on win 7.

Can you give me a screenshot?

Not sure how informative these are. Tried to check for any obvious CSS problems, but nothing really. I changed .manualcrop-image-holder to have top: 100px; (or something) and it pushes it down, but then the crop function is off by 100px.

I just wanted to see the actual problem, because until now I wasn't able to reproduce this :-) So thanks for the screenshots!
This is probably a z-index issue, because the whole overlay should be on top of the admin menu. I'll update you as soon as possible.

I'm still not able to reproduce this issue, see the screenshot attached (I've adjusted the brightness so you can see the admin menu behind the image). I also tested it on the latest Chrome on Windows 7.

Is there anyone who has this an can tell me what the exact issue is so I know how to fix this?

I believe this has been fixed. Try updating to the latest dev and report back if you're still having the problem.

I'm on 7.x-1.3 and I still see this issue, but only when logged in as an administrator. If I login with my "editor" role, the cropping overlay is on top of the toolbar as intended. But as an administrator, the toolbar still interferes. I hope this helps you track down the problem. Thanks for a great tool!

i have the same issue.
i have drupal 7.18 and your last dev version.
the problem comes if you have in your admin theme overlay.
for your css to work, we need that when cropping tool for an image is called, these css are changed, since the #overlay-container, .overlay-modal-background, .overlay-element has a z-index lower than the menu.

#overlay-container, .overlay-modal-background, .overlay-element {
    z-index: 1000; 
}
html.js body.html div#overlay-container iframe.overlay-element {
  z-index: 1001;
}

and when the image overlay is closed, then comes back to

#overlay-container, .overlay-modal-background, .overlay-element {
    z-index: 500; 
}
html.js body.html div#overlay-container iframe.overlay-element {
  z-index: 501;
}

i am trying to do it by jquery, but i am not used to iframes and i cant get elements...
if i find a solution, i report :)

what i did to resolve this problem:

(function ($) {


    $(document).ready(function() {
 

        //to put the #overlay-container on top the menu
        $(document).ajaxSuccess(function() {

            if ($('select').hasClass("manualcrop-style-select")){
                $('select.manualcrop-style-select').change(function() {
                    
                    if ($(document, parent.window.document).contents().find('#overlay-container')){
                            $("#overlay-container", top.document).css("z-index", "1000"); 
                //  It doesnt work:  $(document, parent.window.document).contents().find('#overlay-container').css("z-index", "1000");       
                    }

                });
                

            }
             
            
        });



        //to return the menu on the top
        
        $('body').change(function() {

                if ($('a').hasClass("manualcrop-close") && $("div#overlay + div").hasClass('manualcrop-overlay')){
                    $("#overlay-container", top.document).css("z-index", "500");                      
                }

        });
   
     
    });

 

})(jQuery);

simplify:

        $('body').change(function() {

                if ($('a').hasClass("manualcrop-close") && $("div#overlay + div").hasClass('manualcrop-overlay')){
 
                    $("#overlay-container", top.document).css("z-index", "500");                      

                }else {
                    $("#overlay-container", top.document).css("z-index", "1000");
                }

        });

adding the else makes $(document).ajaxSuccess(function() unnecessary.

this was working with one of my content types that go with ajax, but not with another that doesnt, so, at the end:

(function ($) {


    $(document).ready(function() {


        //for the content type that goes with ajax
        $(document).ajaxSuccess(function() {

            if ($('select').hasClass("manualcrop-style-select")){
                $('select.manualcrop-style-select').change(function() {
                   
                    if ($(document, parent.window.document).contents().find('#overlay-container')){
                            $("#overlay-container", top.document).css("z-index", "1000");     
                    }

                });
               

             }
                   
            $('body').change(function() {

                if ($("body").children('div').last().attr('class')=='manualcrop-overlay'){
                    $("#overlay-container", top.document).css("z-index", "500"); 
                                   
                }

           });
       
            
           
        });


  
  //for the other content type

        if ($('select').hasClass("manualcrop-style-select")){

                    $('select.manualcrop-style-select').change(function() {

                        if ($(document, parent.window.document).contents().find('#overlay-container')){
                                $("#overlay-container", top.document).css("z-index", "1000");

                        }

                    });



                //i had to copy and modify this method because i with the cloning of the crooptool, it didnt let to me assign a function for click (sure there is a solution that i doesnt know)

                ManualCrop.closeCroptool = function(reset) {
                  if (ManualCrop.croptool) {
                    if (reset) {
                      ManualCrop.resetSelection();
                    }
                    $("#overlay-container", top.document).css("z-index", "500");  // i add this line

                    ManualCrop.output.trigger('change');

                    ManualCrop.widget.setOptions({remove: true});
                    ManualCrop.croptool.remove();
                    ManualCrop.croptool = null;
                    ManualCrop.oldSelection = null;
                    ManualCrop.widget = null;
                    ManualCrop.output = null;

                    $('.manualcrop-style-button').show();

                    $(document).unbind('keyup', ManualCrop.handleKeyboard);
                  }
                }



        }
            
    
    
    });
    


})(jQuery);

i hope it helps someone, and if you know a better solution, tell here, please :)

Hi,

Thanks for your work, but could you upload a git patch so I don't miss anything? Then I will review and apply it.
Thanks again!

Matthijs

@Matthijs, thanks for your interest :)
i didnt want to touch the code on your module to be able to upgrade. because of that, i made a separate .js to solve this.
if you do it in your module, it would be to add in:

ManualCrop.showCroptool

if($("#overlay-container", top.document)){
   $("#overlay-container", top.document).css("z-index", "1000");
}

and in

ManualCrop.closeCroptool

if($("#overlay-container", top.document)){
$("#overlay-container", top.document).css("z-index", "500");
}

thanks very much for your module, makes life much easier and sites with better style :)

Hi,

I've been having the same problem with the admin menu in Safari. I'm using Safari 5.1.7, but a client with OS10.8 and the latest release of Safari saw the same thing.

I've just installed the latest dev version and the crop preview image is now displayed lower than the admin and shortcut menu, so it's no longer obscured. However the original image still seems to be displayed behind the admin menu, so the top is partially hidden (see attached screenshot). So although the position of the preview image is much better, the Manual crop interface still seems to be at a lower z-index than the admin menu.

After an insanely long wait (sorry for that) candelas' fix has finally been merged into dev... Thanks!

Matthijs