We Keep Coding

JavaFX layout moves when button is clicked

This is a gif of my problem:
As you can see, the button resizes (elevates? and it moves it's outer layout with itself.
This is the hierarchy:
StackPane
Group // for other content
Group // The make hbox "wrap-content"
HBox // For the 2 buttons
JfxToggleButton // "This is test"
JfxButton // "Restart" button
The only code to add is that I am positioning the HBox's Group top right of the StackPane, like this:
StackPane.setAlignment(hboxGroup, Pos.TOP_RIGHT)
Only StackPane has this issue, BorderPane does not have it.
The reason I am using StackPane is because I want to have the controls on top of the main content.
ToggleButton and HBox have padding.
Actually, padding and alignment do not matter, since the HBox moves relatively regardless.
Btw, I am using jfonix library for button styling.
Thanks for your help.
Edit.:
For those who contribute this problem to JFoenix, this is the same with standard JavaFX controls: (the jump still occurs, only less noticable)
Compared to what I mentioned above, where theHboxhas it's place in the top of a BorderPane, the jump does not happen:

I realized AnchorPane does not have this problem.
So this the final layout hierarchy:
StackPane
Group // Content behind
AnchorPane // That restricts movement, keeps the buttons in place
Group // That keeps the background only around the buttons
HBox // Keeps the buttons next to each other
ToggleButton
Button
So I ended up with the problem that AnchorPane does not let clicks through. Which is fixed by setting the AnchorPane
anchorPane.setPickOnBounds(false);

How do you lock a button's position in JavaFX?

In one of my javafx projects I have a button that triggers the program. Upon displaying new data sometimes the button is pushed downwards due to other components of the borderpane expanding. Any way I can lock the button to a specific position so that it does not move if that occurs?

You could try placing the button on a separate Pane outside of the BorderPane, then grouping both Panes on a root Pane/main Pane of some sort, like so:
Any layout changes to child components of the BorderPane will not affect the layout of any components outside of it.
As you can see though, this leaves empty space at the top of the application. You can overlap the StackPane with the Button on top of the BorderPane if you fiddle with its layout settings, but this does mean that any child components of the BorderPane can be hidden behind the StackPane. It's up to you to decide which way you prefer.

Add components dynamically in JavaFX

Updated: question is incorrect because of low knowledge of the subject. Sorry.
I'm trying to create a small application that shows a graph that contains nodes and connections between them. Both nodes and connections are complex, I mean they can have another components in it, like labels.
I have a big Pane which plays a canvas role. I'm going to add and remove elements from it. The problem is that I want to add or remove graph elements dynamically, using buttons or context menu. Sort of Paint for Graphs :) And I have no idea how to implement it.
Especially I desperately need help in dynamical adding/removing mechanism. I would be very grateful for your help!

Just get the child list of the pane you want to add stuff to, and add the stuff when the appropriate action occurs.
FlowPane pane = new FlowPane();
Button addNode = new Button("Add");
addNode.setOnAction(e -> pane.getChildren().add(new Circle(10));
Notes:
If you want to use a Pane rather than a FlowPane, then Pane has no internal layout, so you need to also set the layoutX and layoutY properties appropriately when you add to the Pane.
If you want to change the rendering order of nodes in the Pane (e.g. which nodes are rendered on the bottom and which on top), then you do that by adding new nodes at an appropriate position in the child list; for example, pane.getChildren().add(0, new Circle(10)), will add a circle that is rendered underneath all other children of the pane rather than on top.

JAVAFX - scene questions

The end goal is to reproduce this image as well as possible. I am trying to start from a bottom up approach as I have many questions.
My first question is how can I get labels alongside the textboxes (it has been suggested to use VBoxes on an hbox to organize everything, but then the textbox automatically goes below the label)
My second question is, as you can see there are borders around the four related boxes to separate the information. I am uncertain how this is done.
Finally what is the configuration of Panes that I should put these four groups on. As I mentioned below someone suggested VBoxes placed on a HBox but I can't get the text to be at the right spot with this approach.
One last thing... I was trying to use ComboBoxes but I can only make one selection, unlike in the image showing the appetizers and main courses selected.
I looked at ListView but its not a drop down box and I read in the API that this in general is not supported since they thought having multiple selections was not necessary. So how might one approach this?
Thanks so much

I'de recommaned an HBox as the primary container, and a VBox on the left side containing the three panes.
In case the window is resizable, and you want to keep either of the panes flushed to the side, try AnchorPane, instead of the HBox.

this required nested panes. for those with similar assignments, creating grid boxes and placing them inside titled boxes allows for the "group box" effect shown above that was a part of swing. An additional HBox was added where the image and title were, making three parts: the top HBox, the right title box, and the left VBox.the left VBox and the top HBox were added into a VBox (or grid), linking the entire left side, which was then placed in an hbox along with the right side title pane.

JavaFX - setVisible hides the element but doesn't rearrange adjacent nodes

In JavaFX, if I have a scene with 2 VBox elements and each VBox has multiple Label in it.
If I set the top VBox to invisible, why does the bottom VBox not move up the scene where the top VBox was ?
The VBox is invisible but I would expect the other objects to move into its place.
I am using FXML to load my controls.

Node.setVisible(boolean) just toggles the visibility state of a Node.
To exclude a Node from its parents layout calculations you additionally have to set its managed state, by calling Node.setManaged(false).
If you want the managed state to be updated automatically alongside the visibility, you can use a binding as #jewelsea pointed out: node.managedProperty().bind(node.visibleProperty());

Since it's invisible, it wont move to the top. You have to remove it with something like:
// remove
vbox.getChildren().remove(...)
Once you've removed the element you want invisible then, the other element should move to the top.

Try to use setVisible and managedProperty together. Here is an example:
myHBox.setVisible(false);
myHBox.managedProperty().bind(myHBox.visibleProperty());

Instead of hiding the vbox you should remove it from the Children and if you want to show it again add the vbox again.

If l want to hide and unhide a node,
I resize the node to 0 if l want to hide it. That way, the node will not occupy space since is not visible to the user, so when l want it to be visible, l adjust the size again for it to be visible.