Clever Geek Handbook

TinyMCE makes a page with a scroll down flash app (Chrome and Safari only)

I have a Flash application that takes up an entire browser window. I need to display TinyMCE over it using an iframe. This iframe should look like it was part of a Flash application.

Everything works well except Chrome and Safari, as soon as TinyMCE appears, the page scrolls a little. This means that the Flash application crashes a little, and TinyMCE looks like it starts slightly lower than it actually does.

Edit: Ok, I did a bit of research and found what was going on was a mysterious white space inserted at the bottom of the page. No overflow: hidden (when I can see the scrollbar) this space is outside of the document means that validation with Chrome developer tools is not in the html element (the space itself is not in the DOM, I can only see html elements before) ... With overflow: hidden it appears inside the body, but I'm guessing because it is somehow "turned on" later or something.

Edit2: Found some information on this issue: http://www.google.com/support/forum/p/Chrome/thread?tid=6d78452432a4c4d7&hl=en

http://www.hotscripts.com/forums/javascript/53545-scripts-causing-white-space-bottom-chrome-safari.html

But there is still no solution ...

enter image description here

Using

overflow:hidden

the page does not improve, it only makes the scrollbars not appear, but the flashmovie still "rises" a few pixels.

CSS pages:

html, body, #flashcontent {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

The HTML element in the Flash app containing the iframe with TinyMCE is:

<div id="htmlel" style="position: absolute; width: 583px; height: 386px; background-color: rgb(255, 255, 255); padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; border-image: initial; overflow-x: auto; overflow-y: auto; left: 854px; top: 117px; "></div>

One more detail: I know this has to do with TinyMCE because when I only add a div on top of a flash app with the same mechanism (which is even bigger) it doesn't. Using FCKeditor inside an iframe also works. This only happens with TinyMCE (and only Chrome and Safari, other browsers render it well).

Any ideas? Thanks in advance.

+3


source to share


2 answers


What if you used a negative margin on your Flash video?



Something like margin-bottom: -20px;

. If that doesn't work, you can try the reverse ( margin-top: -20px;

) on the TinyMCE field.

0


source


I had the same problem so added this to tinyMCE.init

    oninit:function () {
        setTimeout(function(){
            $('#flashcontent').scrollTop(0);
        },0);
        //dedanaxnavi 
    }


I did this for my div and it fixed

0


source






More articles:


All Articles