Cant change input manually in jQuery popup

[andrewflon]

Hello,

I'm using a jQuery popup to display a group of spectrum color pickers. The user then clicks on each color picker and makes their selection. This works fine - however they are unable to manually enter a color code in hex. (I guess this is because of too many nested jQuery pop-ups).

Here's how it looks The input field is locked such that you can't change the hex values.

Is there any way around this?

Here's the options I'm using:

$(".full-color-picker").spectrum({
	    showInput: true,
	    className: "full-spectrum",
	    showInitial: true,
	    showPalette: true,
	    showSelectionPalette: true,
	    maxSelectionSize: 10,
	    preferredFormat: "hex",
	    localStorageKey: "spectrum.demo",
	    palette: [
	        ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)",
	        "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"],
	        ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)",
	        "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], 
	        ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", 
	        "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", 
	        "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", 
	        "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", 
	        "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", 
	        "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)",
	        "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)",
	        "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)",
	        "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", 
	        "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"]
	    ]
	});

[krishnaisdinesh]

Hi andrewflon,

I'm endup in same scenarion. Did you got solution.

[jerry7723]

hi,I'm endup in same scenarion too. if flat:true,that's ok. Did you got solution?

[andrewflon]

Unfortunately I haven't found a solution yet .. but I'd really like one!

[jerry7723]

I get it! You can choose which element the colorpicker container is appended to (default is "body"). This can be any valid object taken into the jQuery appendTo function. Changing this can help resolve issues with opening the colorpicker in a modal dialog or fixed position container, for instance.

[andrewflon]

Hi - can you explain a bit more? Do you have some code showing how you got it working?

[jerry7723]

that's your code: $(".full-color-picker").spectrum({ showInput: true, className: "full-spectrum", showInitial: true, showPalette: true, showSelectionPalette: true, maxSelectionSize: 10, preferredFormat: "hex", localStorageKey: "spectrum.demo", palette: [ ..... ] }); now append the colorpicker container to your modal: $(".full-color-picker").spectrum({ showInput: true, className: "full-spectrum", showInitial: true, showPalette: true, showSelectionPalette: true, maxSelectionSize: 10, preferredFormat: "hex", localStorageKey: "spectrum.demo", palette: [ ..... ] appendTo:".modal" //your modal });

[rodrigogs]

Any news? Where are the maintainers of this lib?

[andrewflon]

Hi - the suggestions of jerry7723 fixed the problem for me (thanks!)