Editor Plugin CSS behaviour causes scrolling bug?

Andy Brodie

Vote:

Hi, We're seeing some rather strange CSS behaviour with our "Topic Editor" plug-in that we're migrating from EPiServer 4 to EPiServer CMS 5. It's easier to explain with pictures instead of words: http://www.networkedplanet.com/epicss/image1.png You can see in the image that there are two vertical scroll bars instead of just one. When using the outer scroll bar (right hand side) the scrolling works as expected. However image2 shows what happens if you use the inner scroll bar: http://www.networkedplanet.com/epicss/image2.png I.e. all the content moves, except for the tabstrip which remains in an absolute position relative to the window. Further down the page we have our own tab strip, which is rendered like this: http://www.networkedplanet.com/epicss/image3.png The construction of the tabstrip mirrors that of the main tabstrip at the top:


// classNameRoot is already set to "active" or "inactive"
var TabLeft = document.createElement("span");
TabLeft.className = "epitab"+classNameRoot+"left";

var TabMiddle = document.createElement("span");
var tabLabel = document.createTextNode(_tabName);
TabMiddle.className = "epitab"+classNameRoot;
TabMiddle.appendChild(tabLabel);

var TabRight = document.createElement("span");
TabRight.className = "epitab"+classNameRoot+"right";

this.Body.appendChild(TabLeft);
this.Body.appendChild(TabMiddle);
this.Body.appendChild(TabRight);
http://www.networkedplanet.com/epicss/image4.png

The same effect happens when I scroll the window: http://www.networkedplanet.com/epicss/image4.png I.e. the tabs seem to stay wherever they were when added to the DOM, whilst the rest of the window scrolls. We don't fiddle with the EPiServer styles; just try to re-use to ensure we're consistent with the look and feel of EPiServer. The same DOM structure works fine in EPi 4.61. Is this a known issue with EPiCMS? Best Regards, Andy

#15717

Jul 18, 2007 18:02

Linus Ekström

Vote:

Hi Andy! We have made some quite big "under the hood" changes to the EPiServer CMS user interface. One thing that might have to do with this is that we have changed doctype from html 4 to xhtml 1.0 transitional for most of the user interface. Some questions I have to be able to pinpoint the problem: 1. Do you have the double scroll bars when you do not add the extra tabs? 2. Why do you need to add the tabs by client script? Isn't it possible to create them in your tab control? 3. What is "body" in this.Body.appendChild(TabLeft)? If it is the body of the document, why are you adding them directly to the body and not the dom element where they should end up?

#16215

Jul 19, 2007 12:31