title: Cannot align text field inside a stack pane
body: <p><a href="https://i.stack.imgur.com/SdSL8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SdSL8.png" alt="enter image description here"></a></p>
  
  <p>I have a <code>StackPane</code> where I need to add four text fields and a chart. These text fields will be used to set the range of the chart axes. I chose <code>StackPane</code> because it rescales nicely (together with the chart) in the dock pane in which it is later included. I didn't embed the text fields in a <code>VBox</code> or <code>HBox</code> because they gave me troubles with a zooming rectangle (scalable) added later to the pane. </p>
  
  <p>Everything works apart from the fact that I am not able to set the distance between the <code>TextField</code>s and <code>StackPane</code> near borders. All I could control is the general positioning like <code>pane.setAlignment(upperY, Pos.TOP_LEFT)</code>. But this means that two of my <code>TextField</code>s overlap in the bottom-left corner. Anyone knows how to fix this, either through CSS or directly in the Java code?</p>
  
  <p>I tried setting <code>-fx-alignment</code> in the CSS. I tried changing the type of pane. I tried setting border insets in the CSS etc.</p>
  
  <pre><code>import javafx.application.Application;
  import javafx.geometry.Pos;
  import javafx.scene.Scene;
  import javafx.scene.chart.LineChart;
  import javafx.scene.chart.NumberAxis;
  import javafx.scene.control.TextField;
  import javafx.scene.layout.HBox;
  import javafx.scene.layout.Pane;
  import javafx.scene.layout.Priority;
  import javafx.scene.layout.StackPane;
  import javafx.scene.layout.VBox;
  import javafx.stage.Stage;
  
  public class Main extends Application
  {
      static LineChart&lt;Number, Number&gt; chart; 
  
      @Override
      public void start(Stage stage) throws Exception 
          {
  
              TextField upperY = new TextField("upperY");  upperY.getStylesheets().add("css/chart.css"); 
              TextField lowerY = new TextField("lowerY");  lowerY.getStylesheets().add("css/chart.css"); 
              TextField rightX = new TextField("rightX");  rightX.getStylesheets().add("css/chart.css"); 
              TextField leftX = new TextField("leftX");  leftX.getStylesheets().add("css/chart.css"); 
  
  
              StackPane pane = new StackPane();
              HBox.setHgrow(pane, Priority.ALWAYS);
              VBox.setVgrow(pane, Priority.ALWAYS);
  
              pane.setAlignment(upperY, Pos.TOP_LEFT);
              pane.setAlignment(lowerY, Pos.BOTTOM_LEFT);
              pane.setAlignment(rightX, Pos.BOTTOM_RIGHT);
              pane.setAlignment(leftX, Pos.BOTTOM_LEFT);
  
              chart = new LineChart&lt;&gt;(new NumberAxis(), new NumberAxis());
  
              pane.getChildren().addAll(chart, upperY, lowerY, leftX, rightX);
  
              Pane root = new Pane();
              root.getChildren().add(pane);
              Scene scene = new Scene(root);
              stage.setScene(scene);
              stage.show();
          } // end start
  
      public static void main(String[] args)
      {
          launch(args);
      }
  }
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.text-field{
      -fx-font-size: 10pt;
      -fx-min-width: 35;
      -fx-pref-width: 35;
      -fx-max-width: 35;    
      -fx-min-height: 18;
      -fx-pref-height: 18; 
      -fx-max-height: 18;
      -fx-font-family: "Arial Narrow";
      -fx-text-fill: black;
      -fx-alignment: BASELINE_CENTER;
      -fx-padding: -2 2 0 2;  /*   // T R B L*/  
      -fx-background-color: white; 
      -fx-control-inner-background: white;
      -fx-border-color: lightgray;
      -fx-border-insets: 0 0 0 0; 
      -fx-background-insets: 0 0 0 0;
  }
  </code></pre>
  
  <p>I need to push the <code>leftX</code> text field to the right and the <code>lowerY</code> text field upwards a little bit.</p>