ColorPicker on Form

Suite and Optimus Suite 5
#1

Hello

Is it possible to attach a colorpicker to a form.
Maybe there’s a sample availabe?

#2

Does anyone know of this is possible?

#3

Hello,

All you have to do is:

  1. add all needed to colorpicker libraries to your code:

<script src="dhtmlxform/codebase/ext/dhtmlxform_item_colorpicker.js"></script> <script src="dhtmlxColorPicker/codebase/dhtmlxcolorpicker.js"></script> <link rel="stylesheet" type="text/css" href="dhtmlxColorPicker/codebase/dhtmlxcolorpicker.css">

  1. set the type of item to “colorpicker”:

formData = [ {type: "colorpicker", name: "Color", label: "Color:", value: "#345abc", imagePath: "dhtmlxColorPicker/codebase/imgs/"} ];

#4

Thanks for your reply. I have a colorpicker on my form now.
But when in the examples the inputfield is filled with the selected color,
but on my form the color stays white.
Is there a solution for this?

#5

In the examples there is a parameter colorbox.
But when I use colorbox = “true”, nothing happens.
I also want to change the position where the colorpicker appears.

#6

Does someone have solution for this?

#7

Hello,

when in the examples the inputfield is filled with the selected color,
but on my form the color stays white.
To fill inputfield with color just add a value with needed color as one of the parameters:
value: “#345abc”.
See the example:

formData = [ {type: "colorpicker", name: "Color", label: "Color:", value: "#345abc", imagePath: "dhtmlxColorPicker/codebase/imgs/"} ];

In the examples there is a parameter colorbox.
But when I use colorbox = “true”, nothing happens.
Unfortunately colorbox attribute is not available in form.
Here is all available attributes of colorpicker in form:

  • name - (string) the identification name. Used for referring to item
  • value - (string) the initial value of item
  • className - (string) the user-defined css class for item
  • offsetLeft - (integer) sets the left relative offset of item (both input and label)
  • offsetTop - (integer) sets the top relative offset of item (both input and label)
  • label - (string) the text label of item
  • labelAlign - (left, right or center) the alignment of label within the defined width
  • labelWidth - (integer or auto) the width of label. The default value is auto
  • labelHeight - (integer or auto) the height of label. The default value is auto
  • inputWidth - (integer or auto) sets input width. The default value is auto
  • inputHeight - (integer or auto) sets input height. The default value is auto
  • position - (label-left, label-right, label-top or absolute) defines the position of label relative to input
  • inputLeft - (integer) the left absolute offset of input. Just position:“absolute” makes sense of the attribute
  • inputTop - (integer) the top absolute offset of input. Just position:“absolute” makes sense of the attribute
  • labelLeft - (integer) the left absolute offset of label. Just position:“absolute” makes sense of the attribute
  • labelTop - (integer) the top absolute offset of label. Just position:“absolute” makes sense of the attribute
  • imagePath - (url) the relative path to colorPicker’s images (dhtmlxColorPicker/codebase/imgs/)
#8

So if I read the attributes correctly it’s not possible to set the selected color in the inputfield and it’s also not possible to change the position where the colorpicker appears.

#9

About colorbox: yes, it’s not available.

About position on page:
You may try to get dhtmlxColorPicker instance.

With help of such method:

var dhxColorPicker = dhxForm.getColorPicker(name);

You can use all methods that are conected to dhtmlxColorPicker.
docs.dhtmlx.com/doku.php?id=dhtm … _toc_alpha

Including ‘setPosition(x,y)’:
docs.dhtmlx.com/doku.php?id=dhtm … etposition

#10

By the way you may try to experiment with linkTo method of colorPicker to achieve the setting color to input.
docs.dhtmlx.com/doku.php?id=dhtm … ker_linkto

Here is the example of using of this method:
dhtmlx.com/docs/products/dht … _link.html

#11

I don’t get it working.

The color in the input field would be nice if it would work, but the position problem is necessary for me te fix. Because the whole form is translated when the colorpicker is opened. A part of the form will be out of the screen then.

#12

Try to add this into your sample

dhxColorPicker = myForm.getColorPicker("name_of_colorpicker"); dhxColorPicker.attachEvent("onShow",function(){ dhxColorPicker.setPosition(10,20) })

#13

Yes that works, thanks a lot!

Maybe you have an example with linking a colorpicker on a form?