Changing Size of Picker Button

4 posts, 1 answers
  1. Stephen Holland-Chang
    Stephen Holland-Chang avatar
    4 posts
    Member since:
    Mar 2010

    Posted 19 Mar 2010 Link to this post

    Hi there, we are using the standard ColorPicker with the color box showing next to an arrow to bring up the palette options. We have tried changing the style of the button to increase the height but it does not work as expected. We would like the color box and button to be taller so ti matches our forms better. Is there a way to do this? The button seems like it might be an image which is not sizable?
     Thanks for any help you guys can provide!
  2. Stephen Holland-Chang
    Stephen Holland-Chang avatar
    4 posts
    Member since:
    Mar 2010

    Posted 22 Mar 2010 Link to this post

    Hoping someone can help me out with this :) Just need to know if it can be done using some form of customization or if we have to create our own box?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Tsvetie
    Admin
    Tsvetie avatar
    1517 posts

    Posted 24 Mar 2010 Link to this post

    Hi Stephen Holland-Chang,
    Yes, you can change the height of the button of the RadColorPicker control. However, as you yourself assumed, this button is actually an image. That is why, you should create your own image, with the correct height and use it instead of the image from the assembly. The CSS selectors that you need to modify are the following:
    <head runat="server">
        <title></title>
        <style type="text/css">
        div.CustomHeight .rcpIcon,
        div.CustomHeight .rcpIcon a
        {
            height:40px;
        }
         
        div.CustomHeight .rcpIcon a
        {
            background: #fff url('MuCustomImage.gif') no-repeat 0 0;
        }
         
        div.CustomHeight .rcpIcon a:hover,
        div.CustomHeight .rcpIcon a:active,
        div.CustomHeight .rcpIcon a:focus
        {
            background-position: 0 0;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
         
        <telerik:RadColorPicker ID="RadColorPicker1" runat="server" ShowIcon="true" CssClass="CustomHeight"></telerik:RadColorPicker>
        </form>
    </body>
    </html>


    All the best,
    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.
  5. Stephen Holland-Chang
    Stephen Holland-Chang avatar
    4 posts
    Member since:
    Mar 2010

    Posted 24 Mar 2010 Link to this post

    Thanks! will give that a shot.
Back to Top