This is a migrated thread and some comments may be shown as answers.
ColorPicker Display Problem
7 Answers 18 Views
This is a migrated thread and some comments may be shown as answers.
Graham
Top achievements
Rank 1
Graham asked on 20 May 2015, 01:17 PM

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

Sort by
0
Marin Bratanov
Telerik team
answered on 25 May 2015, 10:26 AM

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 Bratanov
Telerik
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 Feedback Portal and vote to affect the priority of the items
0
Graham
Top achievements
Rank 1
answered on 25 May 2015, 12:27 PM

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

0
Marin Bratanov
Telerik team
answered on 25 May 2015, 12:41 PM

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 Bratanov
Telerik
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 Feedback Portal and vote to affect the priority of the items
0
Graham
Top achievements
Rank 1
answered on 25 May 2015, 11:33 PM

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

0
Shawn
Top achievements
Rank 1
answered on 28 Nov 2016, 04:05 PM

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.

0
Marin Bratanov
Telerik team
answered on 29 Nov 2016, 08:59 AM

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,

Marin Bratanov
Telerik by Progress
Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
0
Shawn
Top achievements
Rank 1
answered on 10 Jan 2017, 02:49 PM
I don't think that it's a CSS issue. I inspected the elements, and some of the interior elements of the control have a fixed size (Width='xxx') when this happens, indicating that the problem is server-side. Unfortunately I didn't save the generated HTML, but when I see the problem happen again, I will post it.
Asked by
Graham
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Graham
Top achievements
Rank 1
Shawn
Top achievements
Rank 1
Share this question
or