Remove border from SplitPane

Question

I’ve already done some research on the subject and found a post that could’ve been relevant, had it only contained the sort of answer I’m after. I’m looking to remove the border around SplitPanes, that get bigger the more SplitPanes you create within one another.

Here’s what happens:

The grey in the picture is the SplitPane dividers. The red is the borders I’m attempting to remove completely.

The post I’ve attached had the solution:

-fx-box-border: transparent;

With a question like that, you’d expect to find an answer explaining how it’s removed completely. That piece of code only switched the color of the border into transparent—meaning it’s still there!

Perhaps someone could point me in the right direction as to how one would go about removing the border around SplitPanes completely?

score 3 · Accepted Answer · answered Jan 15 '17 at 21:06

3

Guess what? Right after posting, I came across the modena.css stylesheet for the current version of Java FX. Looks as though my research wasn’t good enough after all.

Here’s the solution:

.split-pane
{
    -fx-padding: 0;
}

And as if by magic—the silly border has been removed!

answered Jan 15 '17 at 21:06

D. Ataro

1,711
17
38

Technically, that doesn't remove the border, but it does tell JavaFX to use the entire space of the pane, including that which the border occupies, for your contents. You could even put a negative number in there, in which case the contents will spill outside of the Pane area. – DaveB Jun 11 '21 at 14:04

score 1 · Answer 2 · edited Apr 07 '18 at 17:15

1

Nice work. Just to add, I found that I needed to set the padding specifically on my SplitPane's divider, as such within your CSS file:

.split-pane-divider {
  -fx-padding: 0; 
}

edited Apr 07 '18 at 17:15

Paul Roub

36,322
27
84
93

answered Apr 07 '18 at 16:47

Keith

161
1
10

score 1 · Answer 3 · answered Jun 11 '21 at 12:35

To remove the border make it transparent in css as :

Make a css file say splitpane.css(can choose any name)

.split-pane > .split-pane-divider {
    -fx-background-color: transparent;
}

Then add this the css fine in Stylesheet in splitpane properties tab (as shown in picture) Then choose that css class in styles

Dexter Legaspi · Answer 4 · 2022-02-15T14:10:27.690

in my case, i just want the divider to be flat (no border, no beveled thing) and want the background of the pane to be "inherited" but i want the divider to be still there (so @Keith's answer may not be sufficient):

.split-pane-divider {
    -fx-padding: 0;
    -fx-border-width: 4;
    -fx-border-color: transparent, -fx-background;
}

the transparent may not be needed, and if you don't want/need the pane bg color, remove the -fx-background is not needed. This is what it looks like with the -fx-background specified (pane bg is darkgray):

and this without:

the -fx-border-width controls the width of the divider.

Remove border from SplitPane

4 Answers4