CODEWITHSUNDEEP
javajavafx
user5182503
user5182503

Reputation:

Child pane css style when parent pane has -fx-border-radius in JavaFX

I have two panes - parent pane and child pane. Child pane is inside parent pane. Parent pane has the following css rules:

-fx-border-color:derive(-fx-background, -35%);
-fx-border-width:1;
-fx-border-style:solid;
-fx-border-radius:4;

Child pane has the following css rules:

-fx-background-radius:25;

And this is one of the corner:
enter image description here

As you see the corner is a little pale - I mean parent border is not well seen in the very corner (left bottom corner). To solve this problem I added to child -fx-background-radius:25 however it didn't help. How to fix it, taking into consideration I can't add padding to parent or margin to child?

Upvotes: 5

Views: 829

Answers (2)

Dhiraj
Dhiraj

Reputation: 1462

I created the sample fxml considering your problem statement.

I haven't done anything special but it worked as expected

Please refer below fxml file for same.

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <children>
      <Pane layoutX="129.0" layoutY="72.0" prefHeight="300.0" prefWidth="300.0" style="-fx-border-width: 1; -fx-border-style: solid; -fx-border-radius: 4; -fx-background-color: derive(-fx-background, -35%); -fx-background-radius: 4;">
         <children>
            <Pane layoutX="1.0" layoutY="213.0" prefHeight="86.0" prefWidth="298.0" style="-fx-background-radius: 4; -fx-background-color: white;" />
         </children>
      </Pane>
   </children>
</AnchorPane>

Output :

enter image description here

Upvotes: 0

Leonardo Pina
Leonardo Pina

Reputation: 468

try adding: -fx-background-radius:4; to your parent panel (same radius as border)

Upvotes: 1

Related Questions