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>
Related
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>
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;
}
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>
I have a BoarderPane (decoration: UTILITY) where a ButtonBar with two buttons is put to BOTTOM:
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Button?>
<?import javafx.scene.control.ButtonBar?>
<?import javafx.scene.layout.BorderPane?>
<BorderPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="pw.yaps.client.jfx.view.SettingsViewController">
<bottom>
<ButtonBar BorderPane.alignment="CENTER">
<buttons>
<Button disable="true" mnemonicParsing="false" text="OK" />
<Button cancelButton="true" mnemonicParsing="false" onAction="#handleCancelAction" text="Cancel" />
</buttons>
<padding>
<Insets bottom="12.0" right="12.0" />
</padding>
</ButtonBar>
</bottom>
</BorderPane>
When the Stage is NOT resizable the layout looks like that:
but when I set it resizable it looks different:
How can this behavior be avoided?
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).