How to auto resize the parent node according to its children

Ralph Mathijssen

In JavaFX, I would like to have an HBox that automatically resizes both its height and width according to its containing Button children (parent resizes to children).

What is happening right now, by default, is the following: The HBox-width is set to its max-width, making it fit perfectly into its parent StackPane (child resizes to parent). Just like HERE.

The following images describe my question:


WHAT HAPPENS: ex.1

WHAT I NEED: ex.2


Would anyone happen to know how to accomplish the described, using JavaFX and CSS?

These are some snippets of my code:

// JavaFX Code
BorderPane mainPane = new BorderPane();

Button button1 = new Button("Button1");
Button button2 = new Button("Button2");
button1.getStyleClass().add("menuButton");
button2.getStyleClass().add("menuButton");
HBox buttonParent = new HBox();
buttonParent.setId("buttonParent");
// buttonParent.autosize();
buttonParent.setAlignment(Pos.TOP_LEFT);
buttonParent.getChildren().addAll(button1, button2);

mainPane.setCenter(parent);

/* CSS Code */
.menuButton {
    -fx-background-size: cover;
    -fx-background-position: center;
    -fx-border-color: #162338;
    -fx-border-width: 1px;
    -fx-pref-width: 100px;
}

#buttonParent {
    -fx-background-color: #000;
    -fx-border-color: #162338;
    -fx-border-radius: 3px;
    -fx-border-insets: -1px;
    -fx-background-radius: 3px;
    -fx-padding: 5px;
}

Thank you very much!

Uluk Biy

In JavaFX, the layout of children is managed by the parent layout node. Every layout/pane has its own logic to manage its children, and laso most of these layouts regards child's max min pref values while laying out it.

In your use case, you can get the layout you wanted in the 2nd image by:

buttonParent.setMaxSize(Region.USE_PREF_SIZE, Region.USE_PREF_SIZE );

This will restrict the size of parent to the combined preferred value of its children buttons. Moreover the parent of buttonParent (i.e. BorderPane) will also take into account the max size of its child.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Child div auto resize to its parent

From Dev

Resize iframe and its parent height according to content inside iframe

From Dev

How do I associate a parent node with all of its children in an event listener? jQuery / JavaScript

From Dev

How do I get the dom node of a child element in a component without adding logic to its parent/children?

From Dev

How do I get the dom node of a child element in a component without adding logic to its parent/children?

From Dev

how can i make height and width auto resize according the screen?

From Dev

Return parent node with jq while querying one of its children

From Dev

How to make a div and its children to ignore its parent styles?

From Dev

how to remove Parent node with all children in xmlstring

From Dev

How to make a square view resize with its superview using auto layout

From Dev

How to animate parent height auto when children height is modified

From Dev

How can I make a flexbox parent have the width of its children?

From Dev

how to pass the "..." parameters in the parent function to its two children functions in r

From Dev

How to remove a parent and its children if child contains text

From Dev

How to remove a parent element, but keep its children elements in Thymeleaf?

From Dev

Make element width stretch to fit its children when element's parent has overflow: auto;

From Dev

How to get node bounds according to its specific ancestor in JavaFX 8?

From Dev

Equally resize all children of a Row to fit in their parent

From Dev

Equally resize all children of a Row to fit in their parent

From Dev

how to remove Xelement without its children node using LINQ?

From Dev

how to abort execution of a node and its children in tbb flowgraph

From Dev

How do I clone a Kinetic.node without its children?

From Dev

How to make table auto resize according to the outside Part area in RCP application by using SWT?

From Dev

applyForce to a node according to its rotation

From Dev

applyForce to a node according to its rotation

From Dev

How to delete the parent node without deleting the children nodes

From Dev

how to delete a node in a linked list without accessing its parent node?

From Dev

How to I make a parent div resize height based on children dimensions in this example?

From Dev

Resize NSView to its subview using auto layout

Related Related

  1. 1

    Child div auto resize to its parent

  2. 2

    Resize iframe and its parent height according to content inside iframe

  3. 3

    How do I associate a parent node with all of its children in an event listener? jQuery / JavaScript

  4. 4

    How do I get the dom node of a child element in a component without adding logic to its parent/children?

  5. 5

    How do I get the dom node of a child element in a component without adding logic to its parent/children?

  6. 6

    how can i make height and width auto resize according the screen?

  7. 7

    Return parent node with jq while querying one of its children

  8. 8

    How to make a div and its children to ignore its parent styles?

  9. 9

    how to remove Parent node with all children in xmlstring

  10. 10

    How to make a square view resize with its superview using auto layout

  11. 11

    How to animate parent height auto when children height is modified

  12. 12

    How can I make a flexbox parent have the width of its children?

  13. 13

    how to pass the "..." parameters in the parent function to its two children functions in r

  14. 14

    How to remove a parent and its children if child contains text

  15. 15

    How to remove a parent element, but keep its children elements in Thymeleaf?

  16. 16

    Make element width stretch to fit its children when element's parent has overflow: auto;

  17. 17

    How to get node bounds according to its specific ancestor in JavaFX 8?

  18. 18

    Equally resize all children of a Row to fit in their parent

  19. 19

    Equally resize all children of a Row to fit in their parent

  20. 20

    how to remove Xelement without its children node using LINQ?

  21. 21

    how to abort execution of a node and its children in tbb flowgraph

  22. 22

    How do I clone a Kinetic.node without its children?

  23. 23

    How to make table auto resize according to the outside Part area in RCP application by using SWT?

  24. 24

    applyForce to a node according to its rotation

  25. 25

    applyForce to a node according to its rotation

  26. 26

    How to delete the parent node without deleting the children nodes

  27. 27

    how to delete a node in a linked list without accessing its parent node?

  28. 28

    How to I make a parent div resize height based on children dimensions in this example?

  29. 29

    Resize NSView to its subview using auto layout

HotTag

Archive