Martin Roussel
Top achievements
Rank 1
Rank 1
Martin Roussel
asked on 02 Nov 2012, 05:18 PM
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
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
4 Answers, 1 is accepted
0
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
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.
0
Martin Roussel
Top achievements
Rank 1
Rank 1
answered on 06 Nov 2012, 02:36 PM
Marin,
to replicate the issue, just move the div wrapper outside the <form> tag and put its position to relative as below:
Then try with Animation="none"...you'll notice no issue.
Martin
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"><html xmlns="http://www.w3.org/1999/xhtml"><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
0
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
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.
0
Martin Roussel
Top achievements
Rank 1
Rank 1
answered on 09 Nov 2012, 02:38 PM
Marin,
I moved the wrapper inside the <form> and it solved it. Thanks.
I moved the wrapper inside the <form> and it solved it. Thanks.