Color

Macjohn asked 4 years ago

Expected behavior A fully functional color picker.

Actual behavior Not a functional color picker.

The color picker seem to be buggy (unusable).

Placing 2 color pickers on same page, the first one is almost working. It looks correct, but the is no response when adding an eventlistener. The second one has no marker (the little circle that you move around when picking the color).

When removing the input boxes none of the pickers works.

Adding just one picker as a "dropdown" (A button that opens the picker) - then there is no marker (the little circle that you move around when picking the color).

Also: I need to be able to turn off alpha.

Thanks, John


Grzegorz Bujański staff commented 4 years ago

Can you send a code that doesn't work for you? Note that we added a few color pickers in the documentation and they all work.


Macjohn commented 4 years ago

As dropdown. This gives me a color picker, when clicking the button. But there is no response from the event listener. Also the little circle that is supposed to mark the position on the color picker is not showing.

const pickerText = document.querySelector('.service-color');

const pickerInstanceText = new ColorPicker(
    pickerText,
    {
        colorPickerValue: "rgba(109,207,65,1)",
        colorPickerChangeFormatBtn: false,
        colorPickerCopyIcon: false,

    }
);

pickerText.addEventListener('onChange.mdb.colorPicker', () => { console.log("test"); });


Macjohn commented 4 years ago

UPDATE:

If I use the class .color-picker insetad of .service-color - then the little circle marker shows. But there is still no response from the event listener.


Grzegorz Bujański staff answered 4 years ago

In fact, this event is not triggered. We are sorry for that. We will fix it as soon as possible.


Macjohn commented 4 years ago

OK. Thanks.

And is it possible to turn off all of the controls, except for the color picker it self? I just need my users to be able to pick a color, which I will pass to a hidden input, via the eventListener. The user does not need to see the HEX or the RGB. And the user does not need to add RGB or HEX. And does not need to set Alpha. So I would like to completely hide the controls. Is that possible?


Grzegorz Bujański staff answered 4 years ago

At the moment it is not possible to turn off the alpha slider. You can disable other sections:

<div class="color-picker"
  data-mdb-color-picker-change-format-btn="false"
  data-mdb-color-picker-copy-icon="false"
  data-mdb-color-picker-color-inputs="false"
  data-mdb-picker="color-picker"
></div>

But we will be adding this option in the future. For now you can hide it with CSS:

.color-picker #alphaRange {
  display: none;
}

Macjohn commented 4 years ago

OK cool, thanks.

Is there an estimated time frame on the eventListener bug?


Grzegorz Bujański staff commented 4 years ago

Unfortunately, at the moment I am not able to give an estimated time


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 3.2.0
  • Device: Any
  • Browser: Any
  • OS: Any
  • Provided sample code: No
  • Provided link: No