ColorPicker Display Problem

7 posts, 0 answers
  1. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 20 May 2015 Link to this post

    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

  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 25 May 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 25 May 2015 in reply to Marin Bratanov Link to this post

    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

  5. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 25 May 2015 Link to this post

    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
  6. Graham
    Graham avatar
    28 posts
    Member since:
    Feb 2011

    Posted 25 May 2015 in reply to Marin Bratanov Link to this post

    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

  7. Shawn
    Shawn avatar
    14 posts
    Member since:
    Jun 2014

    Posted 28 Nov Link to this post

    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.

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 29 Nov Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017