This is a migrated thread and some comments may be shown as answers.

BUG: button inside RadPane is displayed static

8 Answers 162 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Hendrik
Top achievements
Rank 2
Hendrik asked on 24 Jun 2008, 10:15 AM
When I use a button control inside a RadPane, FormDecorator displays the buttons static within the pane. When the content of the pane needs to be scrolled, buttons stay on the same position, resulting in all the content being scrolled behind the buttons. This problem occurs in both Firefox and Internet Explorer.

8 Answers, 1 is accepted

Sort by
0
Tsvetie
Telerik team
answered on 24 Jun 2008, 12:04 PM
Hello Hendrik,
The problem you describe is caused by the positioning of the skinned button that we use - absolute. As the DIV element, holding the content of the RadPane has no positioning, when you scroll it, the button visually keeps its place on the screen. In order to get the desired result, you can set position:relative to that DIV element, the following way:
  1. Define the following CSS class in the HEAD of your page:
    <head runat="server">  
        <title>Untitled Page</title>  
        <style type="text/css">  
        .ApplyPosition  
        {  
            positionrelative;  
        }  
        </style>  
    </head> 
  2. Apply the class to the RadPane, holding the button:
    <telerik:RadPane ID="RadPane1" runat="server" CssClass="ApplyPosition"> 
Greetings,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Hendrik
Top achievements
Rank 2
answered on 24 Jun 2008, 12:55 PM
Works perfectly... thanks for the quick response (Y)
0
Doug Rutledge
Top achievements
Rank 1
answered on 09 Jul 2008, 04:49 PM
Hello,
 
I was having the same problem with buttons and your solution fixed it perfectly.  However, now my RadToolTips are no longer displaying over an adjacent RadPane in a RadSplitter.  The pane containing the tool tips is given a scrollbar when the tool tip shows up and you can only see what is visible inside that one pane.  Any ideas?

Doug
0
Tsvetie
Telerik team
answered on 10 Jul 2008, 03:07 PM
Hi Doug Rutledge,
First, let me explain the situation. The RadToolTip control is positioned on the page with a combination of the "position" (position:absolute), "top" and "left" CSS properties. The top and left CSS properties are relative to the first positioned parent element (the first parent element with position, different from static, which is the default value). However, the getLocation method that we use to calculate the position of the targetElement, returns the position, relative to the browser window. One possible solution that we used in previous versions of the control, was to move the RadToolTip to the FORM element, but moving the tooltip in the DOM led to problems with callbacks (when an UpdatePanel is placed in the RadToolTip for example). That is why we abandoned this approach. Now that RadToolTip stays where it is rendered and thus the problems with positioning, when placed in a positioned element.

I have added the problem on our TODO list, but I cannot tell you when it will be fixed. I can offer you two approaches in this situation:
  1. Move the declaration of the RadToolTip outside of the RadPane (with position:relative). That way it will not be rendered in a positioned parent.
  2. In case you do not intend to use the RadToolTip with an UpdatePanale inside, place the following code fragment just below the definition of the ScriptManager - it will move the RadToolTip to the FORM element:
    <script type="text/javascript">  
    Telerik.Web.UI.RadToolTip.prototype._addToolTipToDocument = function(elem)  
    {         
        //Append tooltip to end of document                 
        var form  = document.getElementById(this._formID);  
        if (!form) form = document.forms[0];          
        form.appendChild(this._popupElement);  
    };  
    </script> 
Kind regards,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Doug Rutledge
Top achievements
Rank 1
answered on 10 Jul 2008, 04:03 PM
Thanks for the explanation.  I also noticed the same behavior with the RadMenu.  I have a RadMenu above the splitter, and it would expand behind the panes as well; I assume for the exact same reasons.  For now I've just excluded buttons from the form decorator and removed the .ApplyPosition css class as a quick fix.  I am using RadAjaxManager, so I'm not sure how that impacts your second suggestion.
0
Tsvetie
Telerik team
answered on 14 Jul 2008, 11:54 AM
Hi Doug Rutledge,
I tried to reproduce the problem with the RadMenu, but to no avail - please find my test page attached. In case you could send us a simple page, demonstrating this behavior, we will do our best to help.

As for my second suggestion - the main idea is to overwrite the _addToolTipToDocument function, defined in the JS file of the RadToolTip control. That is why it should appear on the page after the scrips of the RadToolTip have been loaded. In case the RadToolTip is not loaded with AJAX on the page, you can use the approach as already described. Otherwise, you will have to output the script just after the script files from the DLL file have been loaded. In case this is the case and you decide to use this approach, just let me know and I will prepare for you a simple page, demonstrating it.

All the best,
Tsvetie
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
Doug Rutledge
Top achievements
Rank 1
answered on 15 Jul 2008, 03:56 PM
Thank you for the sample.  I'm not 100% sure what the differences are yet between your sample and what I'm doing, but I do see how it works with your sample.  I have stripped down my master page and put it into an aspx page.  I'm not sure how to attach it to the thread so that you can see what I have.
0
Svetlina Anati
Telerik team
answered on 15 Jul 2008, 04:22 PM
Hello Doug,

In order to be able to upload files you should open a support ticket and attach the files there. Once we receive it, we will do our best to help.


Sincerely yours,
Svetlina
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
FormDecorator
Asked by
Hendrik
Top achievements
Rank 2
Answers by
Tsvetie
Telerik team
Hendrik
Top achievements
Rank 2
Doug Rutledge
Top achievements
Rank 1
Svetlina Anati
Telerik team
Share this question
or