Problem with border and background color in JavaFX 8 CSS buttons

Attempting to replicate a Fallout 4 button style using CSS, I have successfully implemented simple background-color and border properties. However, there seems to be an issue with the border not covering the entire button. A part of the background is protruding at the bottom of the button (refer to screenshot 1).

https://i.sstatic.net/xazlR.png

Interestingly, when clicking on the button and holding the mouse down, it disappears partially but not entirely (see screenshot 2).

https://i.sstatic.net/VHqs5.png

Below is a snippet of my CSS for reference:

.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 insights into what might be causing this issue?

javacssbuttonjavafx

Answer №1

To replicate the issue, you will need multiple Button nodes on the Scene. The issue arises from background insets when the button is not in focus. To solve this problem, simply add -fx-background-insets: 0; to the .button:hover CSS rule.

.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;
}

Answer №2

Check out this basic code snippet that utilizes the specified CSS styles. Keep in mind that the issue may not be fully demonstrated with this example.

public class sample 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("sample.css").toExternalForm()
        );

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

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

sample.css

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

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

.text {
    -fx-font-family: "Open Sans";
    -fx-fill: teal;
    -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: teal;
    -fx-background-radius: 0;
    -fx-border-color: black;
    -fx-border-width: 0 3 3 0;
}

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Performing a periodic sum on an array using Java 8 streams

I am looking to calculate a periodic sum on an array by summing values based on index modulo n. int size=100; double[] doubleArr = new double[size]; for (int i = 0; i < size; i++){ doubleArr[i]=Math.random(); } int n=2; double[] results= new double ...

javaarraysindexingsumjava-stream

Saving Pointers to Instances of Various Types

Currently, I have two classes from which I create objects. I am in need of an array that can store references (pointers) to these objects. What should be the data type of this array? ArrayList<Class1> visableObjs = new ArrayList<Class1>(); Th ...

javaarraysoopobject

jQuery CSS Issue: Background Not Updating

Attempting to transform a grid of small square divs by assigning them random background colors, I am facing an issue. Although my syntax appears correct and the console is not reporting any errors, it seems like the .css() method refuses to accept the gen ...

javascriptjquerycss

Ever thought about harnessing the power of SassDoc to create detailed documentation for your sass

After experimenting with sassdoc for documenting our sass mixins and functions, I realized that there doesn't seem to be a straightforward way to generate documentation for our sass variables. Specifically, I am looking for a solution that can output ...

cssnode.jsnpmsassgulp

JavaScript Equivalent of jQuery's removeClass and addClass Functions

I am faced with the challenge of rewriting the following code without using jQuery: document.querySelector('.loading-overlay').classList.remove('hidden'); Can anyone provide guidance on how this can be achieved? ...

javascriptjqueryhtmlcss

Prevent other divs from moving when hovering over in a fluid user interface

When visiting this plunker, I noticed that the id #chat-msgs shifts downward when hovering over All Conversations on a browser with a width less than 767px. I attempted to use position: absolute to fix it, but it didn't work as intended. @media (max- ...

csstwitter-bootstrapuser-experience

As you scroll, the top block in each of the three columns will remain fixed within its

I need assistance with a problem involving three columns and multiple blocks within each column. Specifically, I want the first block in each column to remain fixed at the top when scrolling. However, once you reach the bottom of each column, the first blo ...

javascriptcsssticky

Arranging an array while maintaining the original position of elements

Creating a program to sort an array while preserving the original indexes. To avoid modifying the original array, I duplicated it into list[][]. public static void main(String[] args) { int array[] = {17, 10, 8, 13, 5, 7, 8, 30}; int list[][] = ...

javaarrayssorting

Providing inputs to a JavaScript function, yet the function fails to execute properly

My JavaScript code detects the useragent for Android, iPhone, or iPod and loads specific JavaScript files accordingly. The code functions perfectly, but I noticed that having two 'createScript' functions with different names performing the same t ...

javascriptcssfunctionargumentsonload

JDBC hiccup encountered while attempting a parameterized update

I'm currently attempting to update a record in my MySQL database using JDBC. Below is the method I am using: public void updateGareCorse(CorrePer c) { Connection con = null; PreparedStatement ps = null; ResultSet rs = null; ...

javamysqljdbc

Unable to assign text to a hidden input

section, I am having trouble setting text to an input and clicking on a hidden link. It might sound silly, but this is a workaround for another issue I am facing. Here is what I have tried: WebElement element = webDriver.findElement(By.cssSelector("input ...

javawebdriverselenium-webdriver

site with scrolling options in various directions

Someone recently asked me if I could create a multi-directional scrolling website similar to the one found at COS, but using WordPress. At first, I assumed it might be done with Flash, but the source code suggests it could actually be more simple, possibly ...

jqueryhtmlcsswordpressscroll

Exploring the implementation of if/else statements in Sass/HTML

I need assistance with customizing the appearance of a save button on my form. The button is currently disabled and appears in blue color, but I would like it to change to a different color until all fields within the form are completed. Even though it c ...

cssangulartypescriptsass

Achieving Vertically Centered Alerts with Responsive Functionality in Bootstrap 5

I have implemented an alert that looks like this: <div id="success-alert" style="display: none; color: darkgreen; text-align: center; top: 50%; z-index: 9999" class="alert alert-success alert-autohide" role="al ...

cssbootstrap-5

Tips for preventing duplication of the navbar template across multiple .html pages

Just diving into the world of web development and experimenting with Bootstrap 3 along with this specific template for the first time. Currently, I'm struggling with setting up the navbar. Each content.html file within the template has its own navbar ...

phphtmlcsstwitter-bootstrap

Tips for confirming the existence of a field with an identical registration number (Logical challenge)

(https://i.sstatic.net/52C98.png) I am facing an issue where I need to prevent users from entering a code that already exists in the database. To achieve this, I understand that I must implement an additional validation for the "code" field. However, desp ...

javaspring-bootvalidationif-statementweb

I'm having trouble getting the footer to stay at the bottom of the window instead of the page. Any tips on

I've exhausted all resources searching for a solution to my issue, but nothing seems to quite fit. The floats on my page are extending beyond the boundaries, and when I load in the footer, it stubbornly sits at the bottom of the initial viewport befor ...

htmlcss

Concrete class type

Is there a way to obtain the generic Type from a concrete class? For instance: class MyClass<String> { public Type getGenericType() { // how do I retrieve String.class here? } } I know it can be done with an abstract class like this: abst ...

javagenerics

Unable to achieve consistent sizes for left-floating div elements in HTML

I'm struggling with getting two float: left; divs to appear the same size despite trying everything: https://i.sstatic.net/XTk9G.png This is my first <div> css: #container-div { overflow: hidden; display: table; } .first-column-contai ...

htmlcss

The jQuery click function triggers immediately upon the loading of the page

Despite my best efforts to resolve this issue independently and conduct extensive research on Google, I am still unable to identify the root of the problem. It seems that the click function continues to activate upon page load. Kindly elucidate the under ...

javascriptjqueryhtmlcss