(JavaFX 8) css button border and background color issue

Question

I'm trying to create a Fallout 4 like button style via css with simple background-color and border properties and actually it works well. Only problem is that the border doesn't cover the whole button. There's a piece of the background sticking out at the bottom of the button. (see screenshot 1)

When I click on the button and keep the mouse pressed it disappears, though not completely. (see screenshot 2)

Here's the part of my css:

.button {
    -fx-background-color:transparent ;
    -fx-background-radius:0;
    -fx-border-color:transparent;
    -fx-border-width: 0 3 3 0;
}

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
}

Any idea what could cause this?

Not sure exactly but to solve this you could always make the border thicker I also found this link and the man here seems to think that certain FX css doesn't work properly and gives you some alternatives as well stackoverflow.com/questions/18154110/set-border-size — Matt
– Matt, Commented Nov 30, 2017 at 20:57
I am not able to reproduce the visual problem describing above. Please post a minimal runnable program which we can use. — JKostikiadis
– JKostikiadis, Commented Nov 30, 2017 at 22:56
@JKostikiadis to be honest, I can't reproduce it myself... I just put a single button into a single border pane's center and applied the css and the result is just like the second screenshot in my initial post. — GenerationLost
– GenerationLost, Commented Dec 1, 2017 at 11:40
@Matt I already tried to make the border thicker but unfortunately that doesn't solve anything. Using insets actually causes problems like this, saw that before as I was testing stuff, but there isn't any line setting insets in my css — GenerationLost
– GenerationLost, Commented Dec 1, 2017 at 11:42

JKostikiadis · Accepted Answer · 2017-12-01 11:51:56Z

7

In order to reproduce the problem you will need more that one Button nodes on the Scene. The visual effect is caused due to background insets when the button is not focus. To avoid that add -fx-background-insets: 0; on the .button:hover CSS rule and the problem will be fixed.

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
    -fx-background-insets: 0;
}

answered Dec 1, 2017 at 11:51

JKostikiadis

2,9172 gold badges26 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

GenerationLost Over a year ago

Wow, it really was that simple... Good to know after all, thanks a bunch!

GenerationLost · Accepted Answer · 2017-12-01 11:44:32Z

Here's a simple program you wanted using the following css. Though the problem can't really be reproduced with this.

public class test extends Application
{
    public static void main(String[] args) 
    {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception 
    {
        BorderPane pane = new BorderPane();
        pane.getStylesheets().add(
                getClass().getResource("test.css").toExternalForm()
        );

        Button test = new Button("Back");
        test.setPrefWidth(120);
        pane.setCenter(test);

        Scene scene = new Scene(pane, 150, 150);
        primaryStage.setScene(scene);
        primaryStage.setTitle("csstest");
        primaryStage.show();
    }
}

test.css

@font-face{
    src: url('roboto.ttf');
}

.root {
    -fx-background-color:black;
}

.text {
    -fx-font-family: "Roboto Condensed";
    -fx-fill: lime;
    -fx-font-size: 20;
}

.button {
    -fx-background-color:transparent ;
    -fx-background-radius:0;
    -fx-border-color:transparent;
    -fx-border-width: 0 3 3 0;
}

.button:hover {
    -fx-background-color:lime;
    -fx-background-radius:0;
    -fx-border-color:black;
    -fx-border-width: 0 3 3 0;
}

.button:hover .text{
    -fx-fill: black;
}

Collectives™ on Stack Overflow

(JavaFX 8) css button border and background color issue

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related