Bootstrap skin

ColorPicker - Color Box Size

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
    <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">

        <div class="demo-container size-thin height-custom">
            <div class="inner-demo-container">
                <telerik:RadColorPicker RenderMode="Lightweight" runat="server" ID="RadColorPicker2" ShowEmptyColor="false"
                    SelectedColor="#000000" Columns="5" Width="210px" PreviewColor="false" Preset="None">

Find Assistance

Help Us Improve

Was this example helpful?