Please run the provided example, and read the on screen information. I'm trying to achieve what should be a simple effect of shrinking a Slider (or some component/group of components) slowly down to nothing (by adjusting the ScaleY from 1.0 to 0.0). During this shrinking it should yield the newly available space to other components.

Please evaluate this further as I'm unsure what a good solution could be (and so I am unsure what "bug" to report (if any) or what "feature" to ask that could resolve this).

I donot think this is a bug with any of the used components, so I filed this as a feature request. What I'm looking for is a Parent component that behaves as a mix of StackPane and Group. I want the Group's ability to apply transformations that affect the layout size combined with StackPane's ability to do the correct layout of my component (including the big first label on the Axis being capable of falling outside the layout bounds). Alternatively, flags on either Region or Group to toggle part of their behaviour so this mix can be achieved is fine too.

Note that the example demonstrates another bug with Slider as well (the first label respects the font, the rest don't, but I can workaround that...), and perhaps a 2nd bug when the Preferred Width is set on a StackPane inside a Group...

package hs.javafx;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.Slider;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class GridPaneTest extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
      VBox vbox = new VBox();
      GridPane test = new GridPane();
      GridPane test2 = new GridPane();

      test.setGridLinesVisible(true);
      test2.setGridLinesVisible(true);

      test.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(30);
      }});
      test.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(40);
      }});
      test.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(30);
      }});
      test2.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(30);
      }});
      test2.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(40);
      }});
      test2.getColumnConstraints().add(new ColumnConstraints() {{
        setPercentWidth(30);
      }});


      test.add(new Label("GridPane of 800 pixels wide"), 0, 0);
      test.add(new Label("Columns: 30% 40% 30%"), 1, 0);
      test.add(new Label("Real sizes: 240 320 240 pixels"), 2, 0);

      test.add(new Label("1: slider"), 0, 2);
      test.add(new Slider(0, 100, 50) {{
        setMajorTickUnit(25);
        setShowTickMarks(true);
        setShowTickLabels(true);
        setStyle("-fx-font: 22pt \"Arial\";");
      }}, 1, 2);
      test.add(new Label("so far so good..."), 2, 2);

      test.add(new Label("2: slider (shrink Y 50%)"), 0, 3);
      test.add(new Slider(-100, 100, 0) {{
        setMajorTickUnit(25);
        setShowTickMarks(true);
        setShowTickLabels(true);
        setStyle("-fx-font: 22pt \"Arial\";");
        setScaleY(0.5);
      }}, 1, 3);
      test.add(new Label("too bad, it still takes up the full height of its grid-element (as expected)") {{
        setWrapText(true);
      }}, 2, 3);

      test.add(new Label("3: Group[ slider (shrink Y 50%) ]"), 0, 4);
      test.add(new Group() {{
        getChildren().add(new Slider(-100, 100, 0) {{
          setMajorTickUnit(25);
          setShowTickMarks(true);
          setShowTickLabels(true);
          setStyle("-fx-font: 22pt \"Arial\";");
          setScaleY(0.5);
        }});
      }}, 1, 4);
      test.add(new Label("Group totally messes up the size AND position of the slider... but its shrunk now") {{
        setWrapText(true);
      }}, 2, 4);

      test.add(new Label("StackPane[ slider ]"), 0, 5);
      test.add(new StackPane() {{
        getChildren().add(new Slider(-100, 100, 0) {{
          setMajorTickUnit(25);
          setShowTickMarks(true);
          setShowTickLabels(true);
          setStyle("-fx-font: 22pt \"Arial\";");
        }});
        setScaleY(0.5);
      }}, 1, 5);
      test.add(new Label("Wrapping a StackPane around the slider does not help, height still the same") {{
        setWrapText(true);
      }}, 2, 5);

      test.add(new Label("Group[ StackPane[ slider ] ]"), 0, 6);
      test.add(new Group() {{
        getChildren().add(new StackPane() {{
          getChildren().add(new Slider(-100, 100, 0) {{
            setMajorTickUnit(25);
            setShowTickMarks(true);
            setShowTickLabels(true);
            setStyle("-fx-font: 22pt \"Arial\";");
          }});
          setScaleY(0.5);
        }});
      }}, 1, 6);
      test.add(new Label("A group AND a stackpane then... group again messes everything up") {{
        setWrapText(true);
      }}, 2, 6);

      test2.add(new Label("4: Group[ StackPane(prefW=320)[ sl. ] ]"), 0, 0);
      test2.add(new Group() {{
        getChildren().add(new StackPane() {{
          getChildren().add(new Slider(-100, 100, 0) {{
            setMajorTickUnit(25);
            setShowTickMarks(true);
            setShowTickLabels(true);
            setStyle("-fx-font: 22pt \"Arial\";");
          }});
          setPrefWidth(320);
          setScaleY(0.5);
        }});
      }}, 1, 0);
      test2.add(new Label("Ok, I force the correct size (320 pixels)... some magic extra pixels appear out of nowhere") {{
        setWrapText(true);
      }}, 2, 0);

      test2.add(new Label("5: Group[ StackPane(prefW=320)[ sl. ] ]"), 0, 1);
      test2.add(new Group() {{
        getChildren().add(new StackPane() {{
          getChildren().add(new Slider(0, 100, 50) {{
            setMajorTickUnit(25);
            setShowTickMarks(true);
            setShowTickLabels(true);
            setStyle("-fx-font: 22pt \"Arial\";");
          }});
          setPrefWidth(320);
          setScaleY(0.5);
        }});
      }}, 1, 1);
      test2.add(new Label("Same, just different scale on slider... note how sliders do not align properly") {{
        setWrapText(true);
      }}, 2, 1);

      vbox.getChildren().addAll(test, test2);

      vbox.getChildren().add(new Label(""));
      vbox.getChildren().add(new Label("I want a combination of both. The look should be as in (2), and the (vertical) size as in (3). How can I achieve this?"));
      vbox.getChildren().add(new Label(""));
      vbox.getChildren().add(new Label("Note that (4,5) are close, but still unsatisfactory as multiple sliders below each other will not align when their starting label differs."));
      vbox.getChildren().add(new Label("(1,2) donot have this problem."));

      primaryStage.setScene(new Scene(vbox, 800, 600));
      primaryStage.setResizable(false);
      primaryStage.show();
    }
}