Hi,
We have problems with the appearance of the RadColorPicker Colorpalette
The Pagelayout is a 3 Row Layout with a 2 Column Layout in the Center. In the Laft Pane we have a RadDockLZone (width ~250 height ~500) with several RadDocks. So the Left side loocks a little bit like acdordion Panes made by movable RadDocks. In one RadDock we have two Icons to let the User choose a color. But when I click the Icon, the ColorPalette will appear just below the Icon. This results in Scrollbars and in hidden Overflows. What we like to do is that the Colorpicker Palette opens in a DIV above the others div. so that it will not scale the div where the ColorPicker Icon is located.
Do you have any idea ?
thank you Alex.
We have problems with the appearance of the RadColorPicker Colorpalette
The Pagelayout is a 3 Row Layout with a 2 Column Layout in the Center. In the Laft Pane we have a RadDockLZone (width ~250 height ~500) with several RadDocks. So the Left side loocks a little bit like acdordion Panes made by movable RadDocks. In one RadDock we have two Icons to let the User choose a color. But when I click the Icon, the ColorPalette will appear just below the Icon. This results in Scrollbars and in hidden Overflows. What we like to do is that the Colorpicker Palette opens in a DIV above the others div. so that it will not scale the div where the ColorPicker Icon is located.
Do you have any idea ?
thank you Alex.
7 Answers, 1 is accepted
0
Hello Alex,
The popup palette of the RadColorPicker is rendered right where the RadColorPicker is defined on the page - in your case, in the RadDock. The RadDock shows scrollbars when its content exceeds in size the size of the dock itself. You can think of the dock in this case as of DIV element with size, overflow:auto and position and of the RadColorPicker palette - as DIV with size and position. However, as the color picker is a child of the dock, it cannot show outside of the dock.
That is why the only thing that I can suggest in this case is that you configure the RadDock so that it is large enough to show all its content when the palettes of the color pickers are hidden and set "overflow:visible" for the elements of the Dock. For example:
Regards,
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 popup palette of the RadColorPicker is rendered right where the RadColorPicker is defined on the page - in your case, in the RadDock. The RadDock shows scrollbars when its content exceeds in size the size of the dock itself. You can think of the dock in this case as of DIV element with size, overflow:auto and position and of the RadColorPicker palette - as DIV with size and position. However, as the color picker is a child of the dock, it cannot show outside of the dock.
That is why the only thing that I can suggest in this case is that you configure the RadDock so that it is large enough to show all its content when the palettes of the color pickers are hidden and set "overflow:visible" for the elements of the Dock. For example:
| <head runat="server"> |
| <title></title> |
| <style type="text/css"> |
| div.DockWithColorPicker, |
| div.DockWithColorPicker .rdHTitlebar, |
| div.DockWithColorPicker .rdContent |
| { |
| overflow:visible !important; |
| } |
| </style> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadDock ID="RadDock1" runat="server" Width="200px" Height="200px" CssClass="DockWithColorPicker"> |
| <ContentTemplate> |
| <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true"> |
| </telerik:RadColorPicker> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </form> |
| </body> |
Regards,
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.
0
Juergen Puscher
Top achievements
Rank 1
Rank 1
answered on 06 Aug 2009, 07:42 AM
Hello Tsvetie,
thank you for you answer,
but extending the size of the Parentcontainer is a nogo for us. So I've to find another Solution. I try to prototype 2 different ways.
1. hook the JavaScript Function which create the Palette DIV - looks very stragen :-(
2. hook the click event on the colorPalette Icon and show another ColorPalette, which was invisible before..
I think i would prefer the second way, but I currently dont know how i can hook the Click Event of the PreviewColor Icon.
Do you have any Idea ?
regards
Alex
thank you for you answer,
but extending the size of the Parentcontainer is a nogo for us. So I've to find another Solution. I try to prototype 2 different ways.
1. hook the JavaScript Function which create the Palette DIV - looks very stragen :-(
2. hook the click event on the colorPalette Icon and show another ColorPalette, which was invisible before..
I think i would prefer the second way, but I currently dont know how i can hook the Click Event of the PreviewColor Icon.
Do you have any Idea ?
regards
Alex
0
Accepted
Hi Juergen Puscher,
You can get a reference to the button that opens the palette of the RadColorPicker the following way:
However, instead of defining two color pickers on the page, you can move the palette of the RadColorPicker in the DOM to the BODY element. For example:
All the best,
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.
You can get a reference to the button that opens the palette of the RadColorPicker the following way:
| colorPicker._iconWrapperElement |
However, instead of defining two color pickers on the page, you can move the palette of the RadColorPicker in the DOM to the BODY element. For example:
| <head runat="server"> |
| <title></title> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <asp:ScriptManager ID="ScriptManager1" runat="server"> |
| </asp:ScriptManager> |
| <telerik:RadDock ID="RadDock1" runat="server" Width="200px" Height="200px"> |
| <ContentTemplate> |
| <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true" PaletteModes="All"> |
| </telerik:RadColorPicker> |
| </ContentTemplate> |
| </telerik:RadDock> |
| <script type="text/javascript"> |
| Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip; |
| Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function() |
| { |
| this._oldCreateTabStrip(); |
| var wrapper = document.createElement("div"); |
| wrapper.className = "RadColorPicker RadColorPicker_" + this._skin; |
| document.body.appendChild(wrapper); |
| wrapper.appendChild(this._paletteWrapperElement); |
| }; |
| </script> |
| </form> |
| </body> |
All the best,
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.
0
Johan
Top achievements
Rank 1
Rank 1
answered on 10 Feb 2010, 02:10 PM
How can I do this in this special case
We have a modal popup that we developed ourselves (no Telerik control). The content area is a div with overflow:auto;
When I place the colorpicker inside I get the same issue as the original author of this thread. I added your example to my control.
It works very well until I pick a color. The postback that is excecuted doesnt complete. I see the ajax loading animation for eternity. How could I make this work?
We have a modal popup that we developed ourselves (no Telerik control). The content area is a div with overflow:auto;
When I place the colorpicker inside I get the same issue as the original author of this thread. I added your example to my control.
| Public Class ColorPicker |
| Inherits Telerik.Web.UI.RadColorPicker |
| Public Sub New() |
| Me.PaletteModes = Telerik.Web.UI.PaletteModes.HSV |
| Me.ShowEmptyColor = True |
| Me.ShowIcon = True |
| Me.Preset = Telerik.Web.UI.ColorPreset.Web216 |
| Me.Skin = "Office2007" |
| Me.AutoPostBack = True |
| End Sub |
| Private Sub ColorPicker_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init |
| Dim script As XElement = <script type="text/javascript"> |
| Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip; |
| Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function() |
| { |
| this._oldCreateTabStrip(); |
| var wrapper = document.createElement("div"); |
| wrapper.className = "RadColorPicker RadColorPicker_" + this._skin; |
| document.body.appendChild(wrapper); |
| wrapper.appendChild(this._paletteWrapperElement); |
| }; |
| </script> |
| ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType, "testscript", script.ToString, False) |
| End Sub |
| End Class |
It works very well until I pick a color. The postback that is excecuted doesnt complete. I see the ajax loading animation for eternity. How could I make this work?
0
Hi Johan,
In case you have ajaxified the RadColorPicker control, you should make sure that its palette elements is added to the UpdatePanel that wraps the color picker and not to document.body. Otherwise the color picker will not be ajaxified and you will get an error, when you try to select a color. For example:
I have made one additional small change to the javascript in order to make sure that the DIV element that we move the palette to, is create only once.
Best wishes,
Tsvetie
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
In case you have ajaxified the RadColorPicker control, you should make sure that its palette elements is added to the UpdatePanel that wraps the color picker and not to document.body. Otherwise the color picker will not be ajaxified and you will get an error, when you try to select a color. For example:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> <script type="text/javascript"> Telerik.Web.UI.RadColorPicker.prototype._oldCreateTabStrip = Telerik.Web.UI.RadColorPicker.prototype._createTabStrip; Telerik.Web.UI.RadColorPicker.prototype._createTabStrip = function() { this._oldCreateTabStrip(); var wrapper = this._newPaletteWrapper; if(!wrapper) { wrapper = this._newPaletteWrapper = document.createElement("div"); wrapper.className = "RadColorPicker RadColorPicker_" + this._skin; } $get("<%= RadAjaxpanel1.ClientID %>").appendChild(wrapper); wrapper.appendChild(this._paletteWrapperElement); }; </script></telerik:RadCodeBlock><telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default"></telerik:RadAjaxLoadingPanel><telerik:RadAjaxPanel ID="RadAjaxpanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1"> <cc:ColorPicker ID="ColorPicker1" runat="server"> </cc:ColorPicker></telerik:RadAjaxPanel>I have made one additional small change to the javascript in order to make sure that the DIV element that we move the palette to, is create only once.
Best wishes,
Tsvetie
the Telerik team
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.
0
Johan
Top achievements
Rank 1
Rank 1
answered on 11 Feb 2010, 08:37 PM
Thanks!
That works perfectly, the first time only unfortunately..
Once I picked a color I can't pick again. I get a javascript error, "too much recursion". Doesnt look like a standard javascript error so I guess it's a Telerik error? What can I do to get it working?
That works perfectly, the first time only unfortunately..
Once I picked a color I can't pick again. I get a javascript error, "too much recursion". Doesnt look like a standard javascript error so I guess it's a Telerik error? What can I do to get it working?
0
Hello Johan,
I was not able to reproduce this problem with my test page. Could you please open a new support ticket and send me a simple running project that demonstrates it?
Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I was not able to reproduce this problem with my test page. Could you please open a new support ticket and send me a simple running project that demonstrates it?
Kind regards,
Tsvetie
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.