Can anyone please advise why RadColorPicker appears on our web pages like the attached image ?
This happens in both IE11 and Chrome when the page first appears.
Interestingly, if the browser page is refreshed, the color picker appears properly sized.
Coding (embedded in a Bootstrap panel, although I don't think this is related):
<div class="panel panel-default">
<div class="panel-heading"><asp:Label ID="lblAddEditStep" runat="server"></asp:Label></div>
<div class="panel-body">
<div class="row">
<div class="col-sm-2 coursenames" style="vertical-align:top"><asp:Label ID="lblStepColour" runat="server"></asp:Label></div>
<div class="col-sm-10 coursenames" style="padding-left:20px">
<telerik:RadColorPicker ID="radColourPicker" runat="server"></telerik:RadColorPicker>
</div>
</div>
</div>
</div>
</div>
Thankyou
7 Answers, 1 is accepted
Hi Graham,
This snippet seems to work fine for me (a screenshot of the result is attached), so this leads me to believe that the issue is related to the CSS on the page. What I would suggest is the following:
- make sure all requests are returned properly
- make sure there are no script errors on the page
- make sure the page markup is valid
- try removing Bootstrap in case a global CSS rule of theirs is causing this effect
Regards,
Marin BratanovTelerik
Rank 1
Thanks Marin.
I think it may have something to do with the fact that within the page, the colorpicker is contained in an asp:panel which has its 'visible' property set to false in the aspx, meaning that it is initially hidden when the page starts. The user can press an asp:Button which causes a postback which sets the visible of the panel containing the colorpicker to 'true'. It is at this point that the colorpicker appears incorrectly. I have done a test with the panel set to visible from the start just to see what happens and this seemed to work without a problem, so it seems that the colorpicker doesn't like being in a hidden asp:panel on page startup ?
Graham Plowman
Hello Graham,
Do you use AJAX for this postback? Such an issue is characteristic of the skin-specific stylesheet of the control not being added to the <head> of the page because this is how partial rendering works.
You can work around that by setting the EnableAjaxSkinRendering of the color picker to true before showing it. Something like:
protected void Button1_Click(object sender, EventArgs e){ RadColorPicker1.EnableAjaxSkinRendering = true; Panel1.Visible = true;}Regards,
Marin BratanovTelerik
Rank 1
Hi Marin,
If by Ajax, you mean an Ajax update panel, the answer is 'yes', this is all embedded in an Ajax update panel.
I will try your suggested EnableAjaxSkinRendering fix.
Thanks
Graham
Rank 1
I am having the same problem and setting EnableAjaxSkinRendering="true" on the control doesn't help. Even when I set a fixed size for the control, it renders too large, although not as huge as normally. I have two color pickers in a fixed-width div, but they are in a control that is not visible on page load. The problem is intermittent - it happens occasionally, but not on every page load.
When setting a fixed size, it looks like the containing div has the correct width set, but the interior divs are too large. I'm not sure why. If I see it happen again I will try to post the HTML that is generated.
Hi Shawn,
The issue you observe is probably related to a timing issue between the HTML rendering and obtaining the stylesheets. Without the stylesheets the size of the elements is not rendered correctly and there is no way for us to tie rendering to the web requests.
The following article explains the situation in more detail and offers solutions you can try: http://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#appearance-issues-when-control-is-added-during-ajax-request.
Of course, you can add a hidden control instance on the page in the initial page load so the styles get loaded, but this will add overhead to the initial load.
Regards,
Telerik by Progress
Rank 1