How to get rid of border in SplitPane (JavaFX) ? - javafx

I'd like to remove a border inside a splitPane but i can't figure out from where this border comes.
SplitPane Exemple
In the picture we can see in red the splitpane border, in blue the two components borders and in green the divider border. But between the red and blue border, there is this little white part and this is the part i'd like to remove.
Here is a more precise picture of why it bother me:
Focus on borders
The red border is still the splitPane border, there is again this white part and then one of my splitPane's child.
FXML is really simple so i'll post it:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.SplitPane?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" stylesheets="#transparentDivider.css" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
<children>
<SplitPane dividerPositions="0.3083623693379791" layoutX="12.0" layoutY="6.0" prefHeight="390.0" prefWidth="578.0" style="-fx-border-color: red; -fx-box-border:: transparent;">
<items>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" style="-fx-border-color: blue;" />
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0" style="-fx-border-color: blue;" />
</items>
</SplitPane>
</children>
</Pane>
CSS i'm using for the test:
.split-pane:horizontal > .split-pane-divider {
-fx-background-color: transparent;
-fx-border-color: green;
}

Related

Border-radius in JavaFX CSS not working on containers

I am using JavaFX 8 with css files.This is the look I am trying to achieve:
This is a card container. The drop-shadow works fine, but the corners remain, and a border is created on TOP of the card when I use border-radius, as such:
This leaves the corners very apparent. How do I fix this?
Do not use borders. Css background instead.
Load the sample to SceneBuilder to get the idea.
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.StackPane?>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" style="-fx-background-color: silver;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="200.0" prefWidth="300.0" style="-fx-background-color: purple, blue; -fx-background-radius: 8, 0; -fx-background-insets: 0, 4;">
<effect>
<DropShadow />
</effect>
</StackPane>
</children>
</StackPane>

How to create a checkbox in a button? (javafx)

How to create a checkbox in a button? If it is possible to create it through the fxml file it would be better for me, but also another option would be good.
I tried to put the CheckBox tag inside the Button tag. But it didn't work
<Button text="Write All" styleClass="smallSideButton" style="-fx-pref-width: 120px;" GridPane.rowIndex="2" GridPane.columnIndex="7">
<CheckBox/>
</Button>
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.CheckBox?>
<?import javafx.scene.layout.StackPane?>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Button mnemonicParsing="false" text="Button">
<graphic>
<CheckBox mnemonicParsing="false" text="CheckBox" />
</graphic>
</Button>
</children>
</StackPane>

JavaFx layout missbeheavior with prefered size and min Size

Disclaimer: I am a JavaFx beginner and come from the wpf world
I have a problem with the behavior of the prefered height and the max height. The min height is ignored and the prefered height is used. What do i wrong?
Code Example: (this is only to illustrate the problem)
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.VBox?>
<VBox fx:controller="sample.Controller" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Pane minHeight="100.0" style="-fx-background-color: lightblue;" VBox.vgrow="ALWAYS" />
<Pane fx:id="buttonPane" style="-fx-background-color: lightgreen;">
<children>
<Button minHeight="0.0" minWidth="0.0" onAction="#buttonPaneClick" prefHeight="200.0" text="Button" />
</children>
</Pane>
</children>
</VBox>
Problem: the Button is only half showed and not scaled down. But the min height is 0 so i would expectd that the button goes to 0 when not more place is available but he is cropped out.
From the Pane documentation:
This class may be used directly in cases where absolute positioning of children is required since it does not perform layout beyond resizing resizable children to their preferred sizes.
(my emphasis).
So the Pane containing the button will resize it to its preferred size no matter what. If you replace the pane containing the button with a layout container that does more layout than this (e.g. a HBox) then you will see the behavior you are expecting:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.VBox?>
<VBox maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/9.0.1" xmlns:fx="http://javafx.com/fxml/1">
<children>
<Pane minHeight="100.0" style="-fx-background-color: lightblue;" VBox.vgrow="ALWAYS" />
<HBox fx:id="buttonPane" style="-fx-background-color: lightgreen;">
<children>
<Button minHeight="0.0" minWidth="0.0" prefHeight="200.0" text="Button" />
</children>
</HBox>
</children>
</VBox>

Click through empty areas in a JavaFX VBox

I have a VBox that is in a BorderPane (on the left side) so it is automatically sized to the full BorderPane height. I place a number of panels in this VBox, but they do not take up the full height, meaning that there is some empty space at the bottom. The BorderPane is in turn in a StackPane, so there are layers "underneath" it.
What I would like is for mouse-clicks in this empty space to be passed through to the pane underneath the BorderPane. Web searches have led me to believe that the correct way to do this is to make the VBox transparent, and set it to pickOnBounds="false".
I have tried to make the VBox transparent with both style="-fx-background-color: rgba(0,0,0,0);" and opacity="0", but neither produces the required effect — it seems that even when transparent with pickOnBounds="false", the VBox still consumes mouse events in its empty area and does not allow them to fall through to the next layer down in the StackPane.
The following FXML illustrates the problem. Two toggle buttons are on the bottom layer of a StackPane. On the left-hand side, the button is covered by a VBox, and it cannot be clicked. On the right-hand side, the button is covered by an AnchorPane, and it can be clicked.
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<StackPane fx:id="stackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<AnchorPane fx:id="anchorPane">
<children>
<ToggleButton mnemonicParsing="false" text="ToggleButton under VBox" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" />
<ToggleButton mnemonicParsing="false" text="ToggleButton under AnchorPane" AnchorPane.bottomAnchor="0.0" AnchorPane.rightAnchor="0.0" />
</children>
</AnchorPane>
<BorderPane fx:id="borderPane" pickOnBounds="false" prefHeight="200.0" prefWidth="200.0">
<left>
<VBox fx:id="vBox" pickOnBounds="false" prefHeight="200.0" prefWidth="400.0" style="-fx-background-color: rgba(0,0,0,0);" BorderPane.alignment="CENTER">
<children>
<TitledPane animated="false" text="untitled">
<content>
<AnchorPane fx:id="pane1" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="400.0" />
</content>
</TitledPane>
<TitledPane animated="false" text="untitled">
<content>
<AnchorPane fx:id="pane2" minHeight="0.0" minWidth="0.0" prefHeight="100.0" prefWidth="400.0" />
</content>
</TitledPane>
</children>
</VBox>
</left>
<center>
<AnchorPane pickOnBounds="false" prefHeight="200.0" prefWidth="200.0" BorderPane.alignment="CENTER" />
</center>
</BorderPane>
</children>
</StackPane>
Is there any workaround for this problem?
Write:
-fx-background-color: null;
Instead of:
-fx-background-color: rgba(0,0,0,0);
I do not know why setting the background to null and not transparent works in this case (as I expected that the transparent background would also work fine).

How to set/remove insets in JavaFX TitledPane

I've created a TitledPane in JavaFX with a single child component (a button) as follows:
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TitledPane animated="false" layoutX="137.0" layoutY="60.0" prefHeight="400.0" prefWidth="600.0" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" >
<children >
<Button layoutX="193.1875" layoutY="133.5" mnemonicParsing="false" prefHeight="374.0" prefWidth="598.0" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</AnchorPane>
This appears as below. There is quite a bit a spacing around the button, I'd like to reduce this to either 0 or maybe, a single pixel. I don't see any property of either the AnchorPane or the TitledPane that will do this. Is there such a property?
Use Scenic View to figure out issues like this.
The AnchorPane inside the TitledPane has padding of 0.8em (10px) on all sides. This is defined in the default stylesheet, modena.css. You can reset it in the FXML:
<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.geometry.Insets?>
<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
<children>
<TitledPane animated="false" text="untitled" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<content>
<AnchorPane >
<padding>
<Insets top="0" right="0" left="0" bottom="0"/>
</padding>
<children >
<Button mnemonicParsing="false" text="Button" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</content>
</TitledPane>
</children>
</AnchorPane>
or with an external style sheet with
.titled-pane > * > * > AnchorPane {
-fx-padding: 0em ;
}
I already answered on a similar question, but I also want to post it here, since it also perfectly matches this question.
To extend #James_D's answer:
If you do not use AnchorPane as the TitledPane's content, but some other node, you have to adjust the CSS accordingly.
A universal CSS solution for removing padding on a TitledPane's content, no matter which type of Node is used as content, is the following:
.titled-pane > .content > * {
-fx-padding: 0px;
}
This sets the padding for any child of the TitledPane's content to 0px.

Resources