New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

    Color Box Size

    The size of the color boxes in the palette are automatically calculated based on the Columns property value to fit the given Width. The boxes are with equal width and height and by default the size of each color box is 15px/15px.

    • DefaultCS.aspx
    • DefaultCS.aspx.cs
    • styles.css
    <%@ Page Language="c#" AutoEventWireup="true" Inherits="Telerik.Web.Examples.ColorPicker.BoxSize.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>
     
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html>
    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head runat="server">
        <title>Telerik ASP.NET Example</title>
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
        <div class="demo-containers">
            <div class="demo-container size-thin height-custom">
                <div class="inner-demo-container ">
                    <h2>Default Width</h2>
                    <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker1" ShowEmptyColor="false"
                        SelectedColor="#000000" Columns="5" PreviewColor="false" Preset="None">
                    </telerik:RadColorPicker>
                </div>
            </div>
     
            <div class="demo-container size-thin height-custom">
                <div class="inner-demo-container">
                    <h2>Width=210px</h2>
                    <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker2" ShowEmptyColor="false"
                        SelectedColor="#000000" Columns="5" Width="210px" PreviewColor="false" Preset="None">
                    </telerik:RadColorPicker>
                </div>
            </div>
        </div>
        </form>
    </body>
    </html>

    Support & Learning Resources

    Find Assistance