JavaFX table displays an unsightly white gap when custom CSS is applied to the scrollbar

They say a picture is worth a thousand words:

.

I have successfully applied custom CSS to this table, but I am having trouble filling the upper-right corner. Despite attempting to change the background of the scroll-pane, I have not been able to achieve the desired result.

Here is the current CSS code being used:

.table-row-cell {
  -fx-background-color: rgba(71, 81, 80,0.5);
}

.table-row-cell:hover {
  -fx-background-color: rgba(40, 96, 93, 0.50);
}

.table-row-cell:hover:empty {
  -fx-background-color: rgba(71, 81, 80,0.5);
}

.table-row-cell .table-cell {
  -fx-border-width: 0px;

}

.table-view {
  -fx-border-color: rgba(1, 11, 12, 1);
  -fx-background-radius: 2;
  -fx-border-width: 1px;
  -fx-border-radius: 2;
  -fx-background-color: rgba(71, 81, 80,0.2);
  -fx-background-insets: 0;
}

.table-view .column-header {
  -fx-background-color: rgba(1, 11, 12, 1);
}

.scroll-bar {
  -fx-background-color: rgba(1, 11, 12, 1);
}

.scroll-bar .increment-button:hover {
  -fx-background-color: rgba(1, 11, 12, 1);
}

.scroll-bar .decrement-button:hover {
  -fx-background-color: rgba(1, 11, 12, 1);
}

.scroll-bar .thumb {
  -fx-background-color: rgba(71, 81, 80,0.5);
}

Any suggestions or assistance would be greatly appreciated.

cssjavafxjavafx-8

Answer №1

After some searching, I finally discovered the solution. Big shoutout to @James_D for assisting me in finding it.

The mysterious corner turned out to be part of the table.view header rather than the scroll-pane. You can modify the background using the following code snippet.

The padding is essential as it prevents a strange white line from appearing on the right.

.table-view .column-header-background .filler {
  -fx-background-color: rgba(1, 11, 12, 1);
  -fx-padding: 1em;
}

If you have a more efficient method for achieving this, please feel free to share your answer. It would be greatly appreciated.

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

Populate the browser screen with a series of unpredictable numbers

I'm looking to fully populate the visible window of a webpage with random numbers. My current approach involves generating a long string of random digits first, and then applying the following properties to a div: #mydiv{ font-family: "Inconso ...

javascriptcss

Position the flex item adjacent to the initial flex item using wrap mode only if there is extra space

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl ...

htmlcssflexbox

Verify the visibility of the toggle, and eliminate the class if it is hidden

I have implemented two toggles in the code snippet below. I am trying to find a solution to determine if either search-open or nav-open are hidden, and if they are, then remove the no-scroll class from the body element. $(document).ready(function() { ...

javascriptjqueryhtmlcss

Tips for effectively drying up sass mixin code using before and after blocks

Here is the SCSS code I currently have: @if $position == bottom { &:after { height: $triangle-width; width: $triangle-width; content:""; position:absolute; margin-top: -$triangle-width/2 -$stroke-width; } } @if ...

csssassdrymixins

Solution to trigger CSS :hover to refresh following a transition (such as expanding a menu)

While there are existing discussions on this topic, I am presenting my query for two specific reasons: It introduces a potential alternative solution The demo code could be helpful to individuals looking to emulate a menu Following a CSS transition, the ...

javascripthtmlcssevents

Guide to integrating a Custom Font into live data on a PDF file with the help of jsPDF

I recently successfully converted a dynamic webpage to PDF using jsPDF and now I'm looking to customize the font family of the PDF document. Is there an option for this in jsPDF? Please advise, thank you! Here is my code snippet: <div id="#p ...

javascripthtmljquerycss

"Upon initial activation, the CSS animation will loop twice before coming to a stop

Is there a way to create a navigation bar that starts off transparent at the top of the page and then becomes opaque as you scroll down? I have tried implementing an animation for this effect, but it seems like the animation triggers twice when it should o ...

javascripthtmlcss

Arrange divs in a stack when one becomes too full

Struggling to find a pure CSS solution for this issue, so seeking advice. Imagine three divs aligned horizontally next to each other. If one div overflows onto the next line, I want them to switch to a vertical stack layout. How can this be achieved? I h ...

htmlcssoverflow

HTML data illuminated with a lightbox

Looking for a LightBox alternative that can be used with HTML loaded via AJAX, specifically one that is compatible with IE6 :) I know there are several plugins out there. I'm most interested in something that works across different browsers and is ea ...

jqueryhtmlcssjquery-plugins

Issue with Google Maps not displaying circles on the map

I am currently working on integrating the Google Maps JS API into a website in order to display a map. However, I am facing an issue with drawing a circle centered around a specific point on the map. Despite following the example and documentation provided ...

javascripthtmlcssgoogle-mapsmaps

Creating four divs in CSS/HTML where each div occupies one-quarter of the space while having borders that overlap by one pixel

Take a look at how my test page is currently set up: I want the table (created using divs, not tables) to have 4 columns that are equally spaced with borders of 1 white pixel overlapping each other horizontally. This means there should be exactly 1 white ...

htmlcss

Troubleshooting the issues with implementing cross-browser jscrollpane functionality

Hey there! I've been exploring this tool to customize the default scroll-bar, and here's a fiddle showcasing my experimentation. In the fiddle, I've included the following code snippet <div class="scroll-pane horizontal-only">(located ...

javascriptjqueryhtmlcss

Maintaining consistent div height in Bootstrap 4 flexbox design

I'm currently using Bootstrap 4 with flexbox enabled, but I'm having trouble making the row > col > div boxes have equal heights. I attempted to use position: absolute, but it's not the ideal solution. Below is a screenshot of the is ...

htmltwitter-bootstrapcssflexbox

When adding my Angular web app to the home screen on iOS Safari, the icon appears as a screenshot instead of the specified apple-touch-icon

Despite adding an apple-touch-icon link to my index.html with a 150x150 PNG image, when I try to add my Angular web app as a shortcut to my iOS home screen from Safari, it only appears as a screenshot of the app page. Below is my HTML code: <!doctype ...

htmlcssiosangular

Enabling the use of dot or full stop in JavaScript keycode for numeric input

I am facing a challenge with a method that is supposed to allow all numeric values, including the '.' symbol. Below is the code for my method. While it successfully allows numeric values, it seems to have an issue with keyCode == 190. function I ...

javascriptjqueryhtmlcsskeycode

Elevate your design game by mastering CSS transformations for precise element

I am trying to center a div with a variable width using the following code: div { background: red; max-width: 400px; position: absolute; left: 50%; transform: translateX(-50%); } Check out my demo here While this code works well for centering, ...

csscenteringtranslateresponsive

Tips for adjusting the button spacing on a bootstrap navbar

As someone who doesn't work on front-end tasks frequently, I have encountered an issue while creating a navbar using Bootstrap. The problem arises when trying to add multiple buttons as it causes the spacing between them to appear strange. Does anyon ...

htmlcssbootstrap-5

What is the best way to limit, clip, or mask an object using HTML and CSS?

This is my HTML: http://jsfiddle.net/aALJ6/ (you may use this for reference) <article> <a href="http://www.somepage.com"> <header> <div class="details"> <h1>Title</h1> <p>Mo ...

htmlcss

Switching from Bootstrap's traditional "loading" style progress bar to a more minimal dot style progress bar

Currently, I am implementing a survey progress bar using Bootstrap's "loading" style. Here is the code for the progress bar: <div class="progress" style="height: 20px;"> <div class="progress-bar" role="pro ...

htmlcssbootstrap-4frontendbootstrap-5

Aligning Cards using Bulma Styles

Currently in the process of developing a Pomodoro Timer application and utilizing Bulma as my CSS Framework. I am really enjoying working with it thus far, although still getting the hang of Flexbox. I am seeking advice on the best approach for this projec ...

htmlcssresponsive-designflexboxbulma