This is a migrated thread and some comments may be shown as answers.

Changing Size of Picker Button

3 Answers 72 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Stephen Holland-Chang
Top achievements
Rank 1
Stephen Holland-Chang asked on 19 Mar 2010, 07:52 PM
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!

3 Answers, 1 is accepted

Sort by
0
Stephen Holland-Chang
Top achievements
Rank 1
answered on 22 Mar 2010, 06:13 PM
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?
0
Accepted
Tsvetie
Telerik team
answered on 24 Mar 2010, 11:30 AM
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.
0
Stephen Holland-Chang
Top achievements
Rank 1
answered on 24 Mar 2010, 06:59 PM
Thanks! will give that a shot.
Tags
ColorPicker
Asked by
Stephen Holland-Chang
Top achievements
Rank 1
Answers by
Stephen Holland-Chang
Top achievements
Rank 1
Tsvetie
Telerik team
Share this question
or