Edit images with firefox and chrome sitecake 2.3.6

editing
#1

Sitecake is a great concept, love it!

But on my sites the image-editing does not work (works great on the demo-site).

In firefox (49, running on windows) there are no blue drag & drop-fields at all, it does not matter if I try to integrate from desktop or edit-bar.

in chrome, the images are resized to 0px in edit-mode, I get something like this:

<div class="profileImage sc-content sc-content-_cnt_18237105342026337511 GKTK-0CBD">
<div class="GKTK-0CBNU GKTK-0CBB GKTK-0CBG" style="width: 2px; height: 2px; padding: 0px; border: 0px none rgb(0, 0, 0); margin: 0px 83.5px; top: auto; left: auto; right: auto; bottom: auto; display: block;">
<div class="GKTK-0CBPV"> 
<div class="GKTK-0CBHU GKTK-0CBIK">
<img src="/images/dummy-holger.jpg" width="168px"></div>
<div class="GKTK-0CBOU GKTK-0CBJK"></div>
<div class="GKTK-0CBAV" style="width: 2px; height: 2px; top: 0px; left: 0px;">
<img src="/images/dummy-holger.jpg" width="168px" style="width: 2px; height: 2px; top: 0px; left: 0px;"></div> 
 <div class="GKTK-0CBLV GKTK-0CBNK"></div> 
 <div class="GKTK-0CBOV GKTK-0CBAL"></div> 
 <div class="GKTK-0CBPU"> <div class="GKTK-0CBIU GKTK-0CBKK GKTK-0CBMU"></div> 
 <div class="GKTK-0CBIU GKTK-0CBKK GKTK-0CBLU"></div> 
 <div class="GKTK-0CBIU GKTK-0CBKK GKTK-0CBJU"></div> 
 <div class="GKTK-0CBIU GKTK-0CBKK GKTK-0CBKU"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBFV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBEV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBHV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBIV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBDV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBCV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBGV"></div>
 <div class="GKTK-0CBBV GKTK-0CBLK GKTK-0CBJV"></div> 
 </div>
 </div>
 </div>
 </div>

I am running sitecake on xampp and on hosteurope, both with php 5.6.

The test-site is : http://dotheco.de

Do you have any idea?

Thank you for looking into this…
Sebastian

#2

Problem is with height:100% rule on body tag. If you remove that rule, everything should work.
If height:100% on body tag is a MUST you can detect edit mode and remove it only in that case

<script type="text/javascript"> window.onload = function() { if ( window.sitecakeGlobals && sitecakeGlobals.editMode === true ) { document.getElementsByTagName('body')[0].setAttribute("style","height:auto"); } } </script>

or by using jQuery

<script type="text/javascript"> $(function() { if ( window.sitecakeGlobals && sitecakeGlobals.editMode === true ) { $('body').css('height', 'auto'); } }); </script>

Detect Sitecake edit mode in PHP
#3

Thank you, that solved the problem!!