Hi,
I have a dynamically generated page which generates amongst other things, a list of color picker controls, which allows the user to select a colour for a line on a chart. The page is displayed within a RadPane control in a RadSplitter. The issue is that if the list of items is long, any colour pickers which are situated off the visible area of the screen remain invisible when the screen is scrolled down to view them. The only thing that sometimes gets them to appear is resizing the page, but this is not 100% reliable and is not a good solution to the problem. I do not have a working sample as this is being generated by data dynamically loaded from a database.
If anyone can offer any suggestions why this may happen and offer a potential fix, I would be very grateful.
Thanks in advance.
I have a dynamically generated page which generates amongst other things, a list of color picker controls, which allows the user to select a colour for a line on a chart. The page is displayed within a RadPane control in a RadSplitter. The issue is that if the list of items is long, any colour pickers which are situated off the visible area of the screen remain invisible when the screen is scrolled down to view them. The only thing that sometimes gets them to appear is resizing the page, but this is not 100% reliable and is not a good solution to the problem. I do not have a working sample as this is being generated by data dynamically loaded from a database.
If anyone can offer any suggestions why this may happen and offer a potential fix, I would be very grateful.
Thanks in advance.
1 Answer, 1 is accepted
0
Hi Jonathan,
The only problem that might be the cause for the behavior you describe is the problem of a relatively positioned elements in a scrollable container without position. In short, in case you have ShowIcon=true for the RadColorPickers, you need to apply position to the element that you scroll (the RadPane) as well, in order for the RadColorPickers to scroll as expected. For example:
In case this does not help you, could you please modify this code so that it demonstrates the problem you have and post it here with detailed information on the result you get with it?
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
The only problem that might be the cause for the behavior you describe is the problem of a relatively positioned elements in a scrollable container without position. In short, in case you have ShowIcon=true for the RadColorPickers, you need to apply position to the element that you scroll (the RadPane) as well, in order for the RadColorPickers to scroll as expected. For example:
| <head runat="server"> |
| <title>Untitled Page</title> |
| <style type="text/css"> |
| .ApplyPosition |
| { |
| position:relative; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"/> |
| <telerik:RadSplitter ID="RadSplitter1" runat="server"> |
| <telerik:RadPane ID="RadPane1" runat="server" CssClass="ApplyPosition"> |
| <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker2" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker3" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker4" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker5" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker6" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker7" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker8" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker9" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker10" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker11" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker12" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker13" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker14" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker15" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker16" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker17" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker18" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker19" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| <telerik:RadColorPicker ID="RadColorPicker20" runat="server" ShowIcon="true"></telerik:RadColorPicker> |
| </telerik:RadPane> |
| </telerik:RadSplitter> |
| </form> |
| </body> |
In case this does not help you, could you please modify this code so that it demonstrates the problem you have and post it here with detailed information on the result you get with it?
Best wishes,
Tsvetie
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.