HTMLPlaceholder DIV stays even while scroll of IE is scrolled

[munavar hussain]

Hi Support,

We are using RadHTMLPlace control to display HTML content. When the Browser scroll bar is scrolled, the HTMLHolder stays where it is, it is not moving like other SL controls.

Please see attached pictures for more clarity. ScrollStarted.PNG shows the HTMLPlaceHolder jumps out of Scroll Viewer

Please let me know the fix as soon as possible

Best Regards,
Munavar Hussain

 

 

 

 

[Kiril Stanoev]

Hi Munavar,

 Thank you for your feedback. This is a known limitation of RadHtmlPlaceholder and currently this scenario is not yet supported. We will try to incorporate this feature in future versions of RadHtmlPlaceholder, but I cannot bind to a specific date. Let me know if you have additional questions or comments.

Sincerely yours,
Kiril Stanoev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jason]

Is there any work around? For instance, is there some way that I could place the iFrame at a different coordinate once i scroll.

I tried moving the iFrame (HTMLPlaceholder) to a RadWindow object, but I get the same behavior.

Perhaps I could do something in radwindow's LocationChanged event? I guess this is all dependent on a safe way to attach to the iFrame and move its position myself? ...or is this impossible?

[Valentin.Stoychev]

Hi Jason,

After research it turned out that this is an issue with the default SL html page template you need to replace the style that is on top of the page:

OLD
==============

<style type="text/css">

html, body {

height: 100%;

overflow:auto;

}

body {

padding: 0;

margin: 0;

}

#silverlightControlHost {

height: 100%;

text-align:center;

}

</style>

===================

NEW

===================

 

<style type="text/css">

html, body {

height: 100%;

}

body {

overflow:auto;

padding: 0;

margin: 0;

}

#silverlightControlHost {

height: 100%;

text-align:center;

}

</style>

====================

Please let us know how it goes!

Kind regards,
Valentin.Stoychev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jason]

Valentin:

That is a fantastic!!! This is very beneficial to me and I am sure there are a number of other people that can use this style sheet tweak to enable this functionality.

Now, I am on pins and needles waiting for you to tell me what CSS change is necessary to control the z-order of the HTMLPlaceholder's iFrame to make it fall behind other Silverlight controls. ;-) 

Please let me take this chance to sum up what you did: you essentially made html.style.overflow = visible (default behavior).

With that said, I'd like to share some Javascript that changes the overflow style attribute--in cases where the silverlight control developer is unable to directly dictate the HTML page's style. Please see http://developer.apple.com/internet/webcontent/styles.html for more information.

// ugly workaround for missing support for selectorText in Netscape6/Mozilla
// call onLoad() or before you need to do anything you would have otherwise used
// selectorText for.
var ugly_selectorText_workaround_flag = false;
var allStyleRules;
// code developed using the following workaround (CVS v1.15) as an example.
// http://lxr.mozilla.org/seamonkey/source/extensions/xmlterm/ui/content/XMLTermCommands.js
function ugly_selectorText_workaround() {
    if((navigator.userAgent.indexOf("Gecko") == -1) ||
       (ugly_selectorText_workaround_flag)) {
        return; // we've already been here or shouldn't be here
    }
    var styleElements = document.getElementsByTagName("style");

    for(var i = 0; i < styleElements.length; i++) {
        var styleText = styleElements[i].firstChild.data;
        // this should be using match(/\b[\w-.]+(?=\s*\{)/g but ?= causes an
        // error in IE5, so we include the open brace and then strip it
        allStyleRules = styleText.match(/\b[\w-.]+(\s*\{)/g);
    }

    for(var i = 0; i < allStyleRules.length; i++) {
        // probably insufficient for people who like random gobs of
        // whitespace in their styles
        allStyleRules[i] = allStyleRules[i].substr(0, (allStyleRules[i].length - 2));
    }
    ugly_selectorText_workaround_flag = true;
}


    // setStyleByTag: given an element type, style property and
    // value, and whether the property should override inline styles or
    // just global stylesheet preferences, apply the style.
    // args:
    //  e - element type or id
    //  p - property
    //  v - value
    //  g - boolean 0: modify global only; 1: modify all elements in document
    function setStyleByTag(e, p, v, g) {
        if (g) {
            var elements = document.getElementsByTagName(e);
            for (var i = 0; i < elements.length; i++) {
                elements.item(i).style[p] = v;
            }
        } else {
            var sheets = document.styleSheets;
            if (sheets.length > 0) {
                for (var i = 0; i < sheets.length; i++) {
                    var rules = sheets[i].cssRules;
                    if (rules.length > 0) {
                        for (var j = 0; j < rules.length; j++) {
                            var s = rules[j].style;
                            // selectorText broken in NS 6/Mozilla: see
                            // http://bugzilla.mozilla.org/show_bug.cgi?id=51944
                            ugly_selectorText_workaround();
                            if (allStyleRules) {
                                if (allStyleRules[j] == e) {
                                    s[p] = v;
                                }
                            } else {
                                // use the native selectorText and style stuff
                                if (((s[p] != "") && (s[p] != null)) &&
                           (rules[j].selectorText == e)) {
                                    s[p] = v;
                                }
                            }

                        }
                    }
                }
            }
        }
    }


    setStyleByTag("html", "overflow", "visible", 1);

Again, much thanks.
-Jason

[Valentin.Stoychev]

Hello Jason,

I'm glad this works for you. Showing the html placeholder behind the Silverlight controls is not possible, because it is rendered into the Browser, not in the SL application. This will be enabled only for OOB scenario in SL4. But in browser this will not change, or at least with the current technologies this is not possible.

Best wishes,
Valentin.Stoychev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.