Color

Topic: Color

Macjohn free asked 3 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 3 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 free commented 3 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"); });

Please insert min. 15 characters.

Macjohn free commented 3 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.

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

Please insert min. 20 characters.

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 free commented 3 years ago

OK cool, thanks.

Is there an estimated time frame on the eventListener bug?

Grzegorz Bujański staff commented 3 years ago

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

Add comment

Grzegorz Bujański staff answered 3 years ago

0 0 Best answer

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

Macjohn free commented 3 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?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: 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

Macjohn

127Support score
9Questions 8Answers 1Snippets