HTMLPlaceholder DIV stays even while scroll of IE is scrolled

6 posts, 0 answers
  1. munavar hussain
    munavar hussain avatar
    12 posts
    Member since:
    Aug 2009

    Posted 08 Dec 2009 Link to this post

    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

     

     

     

     

  2. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1511 posts

    Posted 08 Dec 2009 Link to this post

    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.
  3. DevCraft banner
  4. Jason
    Jason avatar
    9 posts
    Member since:
    Jul 2008

    Posted 23 Jan 2010 Link to this post

    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?
  5. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 27 Jan 2010 Link to this post

    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.
  6. Jason
    Jason avatar
    9 posts
    Member since:
    Jul 2008

    Posted 27 Jan 2010 Link to this post

    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




  7. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 28 Jan 2010 Link to this post

    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.
Back to Top
DevCraft banner