We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Open up Color Picker

How can I open the color picker from clicking anywhere in the control and not just the arrow?

The hit box on the arrow is too small, and I want to let users expand the color picker by clicking anywhere inside the control.


3 Replies

SP Sureshkumar P Syncfusion Team November 3, 2016 12:32 PM UTC

Hi Christopher, 
Thanks for contacting Syncfusion support. 
To open the color picker from clicking anywhere in the control, use our existing colorPicker property “buttonMode”
By default, ColorPicker control render with SplitButton mode. In this mode, popup will open when clicking on arrow icon only. So for your scenario, please initialize ColorPicker with ‘buttonMode’ as ‘dropdown’. 
Please refer to the below code example.    
 <input type="text" id="colorPick" /> 
                                      value: "#278787", 
                                      buttonMode: ej.ButtonMode.Dropdown });  // button mode API as enum type 
                                 /* or use buttonMode API as string type buttonMode: “dropdown” */ 
Sureshkumar P 

CH Christopher Hui November 3, 2016 04:49 PM UTC


There is a typo in the configuration. 

It says "ej.ButtonModel.DropDown" when it should be ej.ButtonMode.Dropdown

SP Sureshkumar P Syncfusion Team November 4, 2016 10:39 AM UTC

Hi Christopher,  
 Thanks for your suggestion.     
The reported changes will be refreshed in one business day. We appreciate your patience until then. 
Sureshkumar P 

Live Chat Icon For mobile
Up arrow icon