BUG: button inside RadPane is displayed static

9 posts, 0 answers
  1. Hendrik
    Hendrik avatar
    23 posts
    Member since:
    Jan 2008

    Posted 24 Jun 2008 Link to this post

    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.
  2. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 24 Jun 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hendrik
    Hendrik avatar
    23 posts
    Member since:
    Jan 2008

    Posted 24 Jun 2008 Link to this post

    Works perfectly... thanks for the quick response (Y)
  5. Doug Rutledge
    Doug Rutledge avatar
    18 posts
    Member since:
    Apr 2008

    Posted 09 Jul 2008 Link to this post

    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
  6. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 10 Jul 2008 Link to this post

    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
  7. Doug Rutledge
    Doug Rutledge avatar
    18 posts
    Member since:
    Apr 2008

    Posted 10 Jul 2008 Link to this post

    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.
  8. Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 14 Jul 2008 Link to this post

    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
  9. Doug Rutledge
    Doug Rutledge avatar
    18 posts
    Member since:
    Apr 2008

    Posted 15 Jul 2008 Link to this post

    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.
  10. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 15 Jul 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017