CODEWITHSUNDEEP
cssjavafxfxml
MMAdams
MMAdams

Reputation: 1498

ColorPicker without color square in Javafx?

I want to implement my own SplitMenu ColorPicker that actually functions like a SplitMenuButton. To do this, I have a button which when clicked changes the color of selected text to the current color, and a color picker, which does the same, but also changes the current color. So my FXML looks like this:

<HBox>
    <Button text="Aa" fx:id="colorTextButton" styleClass="leftButton" onAction="#colorText"/>
    <ColorPicker fx:id="colorPicker" styleClass="rightButton colorPicker" onAction="#setColor">
</HBox>

my CSS looks like this:

.leftButton {
    -fx-background-insets: 0;
    -fx-background-radius: 0.25em 0 0 0.25em;
    -fx-border-style: solid;
    -fx-border-color: #bcbcbc;
    -fx-border-width: 0.08em 0.00em 0.08em 0.08em;
    -fx-border-radius: 0.25em 0 0 0.25em;
}

.rightButton {
    -fx-background-insets: 0;
    -fx-background-radius: 0 0.25em 0.25em 0;
    -fx-border-style: solid;
    -fx-border-color: #bcbcbc;
    -fx-border-width: 0.08em 0.08em 0.08em 0.04em;
    -fx-border-radius: 0 0.25em 0.25em 0;
}

.colorPicker {
    -fx-color-label-visible: false;
}

Is there any way, either programatically through java or in CSS or FXML to get rid of the square of color in the color picker? It's fairly easy to recreate a similar square as a graphic on my other button, but how do I get rid of the one on the colorpicker?

Upvotes: 1

Views: 970

Answers (1)

JKostikiadis
JKostikiadis

Reputation: 2917

You could remove the preview color box from ColorPicker using the CSS below :

.color-picker > .color-picker-label > .picker-color > .picker-color-rect {
    -fx-stroke: null;
    -fx-fill : null;   
}

This will cause the box to disappear completely.

Edit : But as I can see the box will appear again if you open the color palette and keep changing between colors having the mouse(left/right) pressed and it will disappear again when the mouse is released. I will give it a look later or tomorrow.

Edit 2 : Another good way which is better that the above is to hide the Rectangle programatically using the code below : 

Rectangle rec = (Rectangle) colorPicker.lookup("Rectangle");
rec.setVisible(false);

Upvotes: 2

Related Questions