Unify styles in the scene builder and actual application

See more:

Java

GUI

Eclipse

JavaFX

I am a javaFX beginner and Spent a lot of time designing my calculator GUI on `Scene Builder 2.0` and setting suitable size for every element on the scene . However, when running the project on eclipse sizes differ and the text on `textField` and `Label` won't show.and that's crucial because I can't test the calculator logic !!

> what I've tried

- setting sizes to USE_PREF_SIZE
but it didn't work.
below are images of both :

>on eclipse : https://ibb.co/dxk7cn

>on scene Builder : https://ibb.c

What I have tried:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.text.*?>
<?import javafx.scene.control.*?>
<?import javafx.geometry.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<fx:root maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="500.0" prefWidth="320.0" style="-fx-background-color: #17202A;" type="AnchorPane" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
   <children>
      <GridPane layoutX="6.0" layoutY="161.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="300.0" prefWidth="314.0" style="-fx-background-color: #17202A;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="3.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="200.0">
        <columnConstraints>
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
            <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" />
        </columnConstraints>
        <rowConstraints>
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
            <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Button fx:id="equals" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#equalsClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #48C9B0;" text="=" textFill="#c31d1d" GridPane.columnIndex="3" GridPane.rowIndex="4">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <font>
                  <Font size="24.0" />
               </font>
            </Button>
            <Button fx:id="point" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#pointClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="." GridPane.columnIndex="2" GridPane.rowIndex="4">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="zero" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#zeroClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="0" GridPane.columnIndex="1" GridPane.rowIndex="4">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="modulo" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#moduloClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="\%" GridPane.rowIndex="4">
               <padding>
                  <Insets bottom="1.0" />
               </padding>
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="plus" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#plusClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #E74C3C;" text="+" GridPane.columnIndex="3" GridPane.rowIndex="3">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="three" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#threeClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="3" GridPane.columnIndex="2" GridPane.rowIndex="3">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="two" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#twoClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="2" GridPane.columnIndex="1" GridPane.rowIndex="3">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="one" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#oneClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="1" GridPane.rowIndex="3">
               <padding>
                  <Insets bottom="1.0" />
               </padding>
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="divide" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#divideClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #E74C3C;" text="/" GridPane.columnIndex="3" GridPane.rowIndex="2">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="six" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#sixClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="6" GridPane.columnIndex="2" GridPane.rowIndex="2">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="five" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#fiveClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="5" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="four" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#fourClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="4" GridPane.rowIndex="2">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="multiply" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#timesClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #E74C3C;" text="*" GridPane.columnIndex="3" GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="nine" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#nineClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="9" GridPane.columnIndex="2" GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <padding>
                  <Insets bottom="3.0" left="3.0" right="3.0" />
               </padding>
            </Button>
            <Button fx:id="eight" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#eightClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="8" GridPane.columnIndex="1" GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <padding>
                  <Insets bottom="3.0" left="3.0" right="3.0" />
               </padding>
            </Button>
            <Button fx:id="seven" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#sevenClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="7" GridPane.rowIndex="1">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </Button>
            <Button fx:id="minus" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#minusClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #E74C3C;" text="-" GridPane.columnIndex="3">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <font>
                  <Font name="Britannic Bold" size="21.0" />
               </font>
            </Button>
            <Button fx:id="previous" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#prevClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="PREV" GridPane.columnSpan="3">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <font>
                  <Font name="Britannic Bold" size="21.0" />
               </font>
               <padding>
                  <Insets left="3.0" />
               </padding>
            </Button>
            <Button fx:id="clear" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#clearClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="CE" GridPane.columnIndex="2">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <font>
                  <Font size="22.0" />
               </font>
            </Button>
            <Button fx:id="next" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" mnemonicParsing="false" onAction="#nextClicked" prefHeight="50.0" prefWidth="70.0" style="-fx-background-color: #ffffb3;" text="NEXT" GridPane.columnIndex="1">
               <padding>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </padding>
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
               <font>
                  <Font name="Britannic Bold" size="21.0" />
               </font>
            </Button>
         </children>
      </GridPane>
      <Label fx:id="displayLabel" layoutX="5.0" layoutY="51.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="50.0" prefWidth="308.0" style="-fx-background-color: #eee9e9;" textFill="#3c3232" AnchorPane.bottomAnchor="400.0" AnchorPane.leftAnchor="3.0" AnchorPane.rightAnchor="3.0" AnchorPane.topAnchor="3.0">
         <font>
            <Font size="18.0" />
         </font></Label>
      <TextField fx:id="inputTextField" alignment="CENTER_RIGHT" layoutX="114.0" layoutY="104.0" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" nodeOrientation="LEFT_TO_RIGHT" prefHeight="96.0" prefWidth="314.0" style="-fx-background-color: #17202A;" text="rrrro" AnchorPane.bottomAnchor="300.0" AnchorPane.leftAnchor="3.0" AnchorPane.rightAnchor="3.0" AnchorPane.topAnchor="104.0">
         <font>
            <Font size="22.0" />
         </font></TextField>
   </children>
</fx:root>