2 Replies Latest reply on May 7, 2012 2:42 PM by 934225

    How to style GridPane each grid's border

      I wants to style gridPane like a table that each cell have border. But when I add below code, it just outer most rectangle have border, but inner cell didn't have border.

      GridPane grid = new GridPane();
      grid.add(new Button(), 0, 0);
      grid.add(new Button(), 1, 0);
      grid.add(new Button(), 0, 1, 2, 1);
      grid.setStyle("-fx-border: 2px solid; -fx-border-color: red;");

      How can I set the cell border of the GridPane?

      Edited by: Owen on May 5, 2012 7:32 AM
        • 1. Re: How to style GridPane each grid's border
          A few methods:
          a) style borders of the individual cells (and ensure that they fill their entire grid position) or
          b) you style the background of the whole grid leaving gaps between cells which fill their entire grid position as is shown below or
          c) add new grid nodes with lines and then style the added lines.

          I chose method b (styling the grid background) for the code below:
          import javafx.application.Application;
          import javafx.geometry.HPos;
          import javafx.geometry.VPos;
          import javafx.scene.*;
          import javafx.scene.control.*;
          import javafx.scene.layout.*;
          import javafx.stage.Stage;
          public class GridPaneStyle extends Application {
            @Override public void start(final Stage stage) {
              // create a grid with some sample data.
              GridPane grid = new GridPane();
              grid.addRow(0, new Label("1"), new Label("2"), new Label("3"));
              grid.addRow(1, new Label("A"), new Label("B"), new Label("C"));
              // make all of the Controls and Panes inside the grid fill their grid cell, 
              // align them in the center and give them a filled background.
              // you could also place each of them in their own centered StackPane with 
              // a styled background to achieve the same effect.
              for (Node n: grid.getChildren()) {
                if (n instanceof Control) {
                  Control control = (Control) n;
                  control.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
                  control.setStyle("-fx-background-color: cornsilk; -fx-alignment: center;");
                if (n instanceof Pane) {
                  Pane pane = (Pane) n;
                  pane.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
                  pane.setStyle("-fx-background-color: cornsilk; -fx-alignment: center;");
              // style the grid so that it has a background and gaps around the grid and between the 
              // grid cells so that the background will show through as grid lines.
              grid.setStyle("-fx-background-color: palegreen; -fx-padding: 2; -fx-hgap: 2; -fx-vgap: 2;");
              // turn layout pixel snapping off on the grid so that grid lines will be an even width.
              // set some constraints so that the grid will fill the available area.
              ColumnConstraints oneThird = new ColumnConstraints();
              grid.getColumnConstraints().addAll(oneThird, oneThird, oneThird);
              RowConstraints oneHalf = new RowConstraints();
              grid.getRowConstraints().addAll(oneHalf, oneHalf);
              // layout the scene in a stackpane with some padding so that the grid is centered 
              // and it is easy to see the outer grid lines.
              StackPane layout = new StackPane();
              layout.setStyle("-fx-background-color: whitesmoke; -fx-padding: 10;");
              stage.setScene(new Scene(layout, 600, 400));
              // can be uncommented to show the grid lines for debugging purposes, but not particularly useful for styling purposes.
            public static void main(String[] args) { launch(); }
          1 person found this helpful
          • 2. Re: How to style GridPane each grid's border
            This example is very very helpful.