Color Picker - Disable Button Caption and RGB-Slider

Hi everybody,

i´m using “com.vaadin.shared.ui.colorpicker.Color;” in my app.

Is there a way to disable the “rgb-slider” at the rgb tab in the popup window?

Also i want to disable the caption of the button and only show the selected color.
maybe in styles.css?

thanks for your help

Hey P h,

I’m not that familiar with the color picker, so take this for what it’s worth. But, with SCSS, if you want to hide the color gradient selection:

.v-colorpicker-gradient-container {
  display: none;
}

If you want to hide the RGB sliders:

.v-slot-rgb-sliders {
  display: none;
}

What caption exactly is it that you want to hide? If you’re talking about the ColorPicker popup button’s caption, it doesn’t show any caption by default unless you call setCaption.

it´s working perfectly!!! Thank you

Hmm in my application, the caption is shown although i havn´t called setCaption. (see my attachement)

here´s my code:

import com.vaadin.ui.ColorPicker;

private ColorPicker buildColorPicker(final LogLevel level) {
ColorPicker picker = new ColorPicker(level.toString(), getInitColor(level));
picker.setSwatchesVisibility(false);
picker.setHistoryVisibility(false);
picker.setTextfieldVisibility(false);
picker.setHSVVisibility(false);

//Add Event-Handler
picker.addColorChangeListener(new ColorChangeListener() {
@Override
public void colorChanged(ColorChangeEvent event) {
//do something nice
}
});
return picker;
}

my plan was to add a small button, which shows only the definded color of the picker.
19170.png

Ah, yes, you are correct. Apologies!

You could try

one

of the following:

.v-colorpicker .v-button-caption {
  display: none;
}

.v-colorpicker-button-color ~ .v-button-caption {
  display: none;
}

Instead of using the ColorPicker, use the ColorPickerArea instead.

works great!!! Perfect thank you very much!