animation issue in Splitter

5 posts, 0 answers
  1. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 02 Nov 2012 Link to this post

    Hi,

    im using a RadSplitter. One of its pane loads another page (it is that page that contains the RadNotification). That page use a wrapper div in order to style its borders. When the Notification appears (and if I use any animation other than "none"), the Notification is quickly moved to another position (close to where it originally showed up) after an short moment of time. The wrapper div in question is using padding, margin and borders in its CSS. If I clear out the values for those properties, the Notification appears without being "moved". Looks like the CSS is applied after the Notification is generated and shown. This behavior seems not to occur if Notification conjtrol is moved outside the RadSplitter. Is it a normal behavior of the control? Any workaround?

    TIA
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 06 Nov 2012 Link to this post

    Hello Martin,

    This is the first time we receive a similar report and I was not able to reproduce this problem in order to investigate it. I am attaching here my test page as a reference. Can you modify it accordingly and post the needed modifications so I can see the issue and debug it? Does it occur only under a certain browsers or are certain steps needed for me to reproduce it?


    Greetings,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 06 Nov 2012 Link to this post

    Marin,

    to replicate the issue, just move the div wrapper outside the <form> tag and put its position to relative as below:

    <%@ Page Language="C#" AutoEventWireup="true" Inherits="notification_animation_positioning_content" Codebehind="content.aspx.cs" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        html, body, form
        {
            margin: 0;
            padding: 0;
            height: 100%;
        }
        </style>
    </head>
    <body>
     
     
        <div style="position:relative;border: 2px solid red; margin: 20px; padding: 20px; width: 300px; height: 300px;">
      
            <form id="form1" runat="server">
     
                 <telerik:RadNotification runat="server" ID="rn1" Width="200px" Height="100px" Text="Lorem ipsum dolor sit amet" Animation="Fade">
                 </telerik:RadNotification>
               
                 <asp:ScriptManager ID="Scriptmanager1" runat="server" />
     
     
                  <asp:Button ID="Button1" runat="server" Text="show the notification" OnClientClick="showNotification(); return false;"  />
     
     
                    <script type="text/javascript">
                        function showNotification()
                        {
                            $find("<%=rn1.ClientID %>").show();
                        }
                    </script>
         
                </form>
     
            </div
     
    </body>
    </html>

    Then try with Animation="none"...you'll notice no issue.

    Martin


  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 09 Nov 2012 Link to this post

    Hi Martin,

    Setting position:relative to a container so high in the page structure will mean that all elements on the page that use some sort of positioning (like the notification) will be relative to this element. The other CSS properties you add to it only make the behavior easier to spot, as otherwise this div would match the form element.

    RadNotifiacation renders its popup as a direct child of the form element and is, therefore, relative to the form when positioning itself. This is how the control works and this allows it to position properly in most scenarios, so it relies on this. What you have done is to change the positioning of the entire page and thus changed what the notification relies on.

    What I can advise is that you either move this relatively positioned container inside the form so you can still keep your other layout in place, or remove the animations so that the position of the notification does not change. Animations simply change the control's lifecycle and positioning for a while (until they complete) and this cannot be avoided in another manner than disabling them.


    All the best,
    Marin Bratanov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 09 Nov 2012 Link to this post

    Marin,

    I moved the wrapper inside the <form> and it solved it. Thanks.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017