[FIXED] How to remove a "ghost line" in a GridPane in JavaFX?

Issue

I created a GridPane with 48 cells (8 columns x 6 rows), and I don't know why but there is a sort of "ghost line" that I'm not able to remove. Can you help me, please?

See the images with and without padding to understand better what I mean.

How the GridPane appears with a 10px padding:

How the GridPane appear without a padding, but with this "ghost line":

Here's the image I'm using, but you can use whatever image you want: image.jpg

Here's a minimal reproducible example:

scene.fxml

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

<?import javafx.scene.layout.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.Cursor?>
<?import javafx.scene.control.*?>

<AnchorPane fx:id="backgroundPane" xmlns="http://javafx.com/javafx/16" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
    <children>
    
    <Button fx:id="gridButton" text="Grid" onAction="#Grid" prefWidth="150.0"> </Button>
    <GridPane fx:id="wellsGridPane" AnchorPane.leftAnchor="100.0" AnchorPane.topAnchor="100.0"></GridPane>
    
    </children>
</AnchorPane>

Main

package application;

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {
    
    public static void main(String[] args) {
        launch(args);
    }
    
    @Override
    public void start(Stage mainStage) {

        //load the fxml and css files
        FXMLLoader loader = new FXMLLoader(getClass().getResource("/resources/scene.fxml"));
        
        Parent root = null;
        try {
            root = loader.load();
        } 
        catch (IOException e) {
            e.printStackTrace();
        }
        Scene scene = new Scene(root, 1000, 750);
        
        Controller c = loader.getController();
        c.setStage(mainStage); 
                
        mainStage.setTitle("Software");
        mainStage.setScene(scene);
        
        mainStage.show();
        root.requestFocus(); 
    }
}

Controller

package application;

import java.io.File;
import java.net.MalformedURLException;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class Controller {

    @FXML
    private GridPane wellsGridPane;

    @FXML
    private void Grid (ActionEvent event) {
        
        System.out.println("Grid pressed");
         wellsGridPane.getChildren().clear();
         wellsGridPane.getColumnConstraints().clear();
         wellsGridPane.getRowConstraints().clear();
            
         for (int i = 0; i < 8; i++) { //8 cols
             ColumnConstraints colConst = new ColumnConstraints();
             colConst.setPercentWidth(100.0 / 8);
             wellsGridPane.getColumnConstraints().add(colConst);
         }
         for (int i = 0; i < 6; i++) { //6 rows
             RowConstraints rowConst = new RowConstraints();
             rowConst.setPercentHeight(100.0 / 6);
             wellsGridPane.getRowConstraints().add(rowConst);    
         }
        
         wellsGridPane.setHgap(0); //10 for the first image, 0 for the second image I uploaded
         wellsGridPane.setVgap(0); //10 for the first image, 0 for the second image I uploaded
        
         System.out.println("Grid is " + wellsGridPane.getRowCount() + " x " + wellsGridPane.getColumnCount());
            
         Image img = null;
         try {
            img = new Image(new File("src\\resources\\image.jpg").toURI().toURL().toExternalForm(), 100, 100, true, false);
         } 
         catch (MalformedURLException e) {
            e.printStackTrace();
         }
         
         int i = 0;
         int j = 0;
         
         for (int n=0; n<48; n++) {  
             
             ImageView image = new ImageView(img);
        
             StackPane pane = new StackPane();
             pane.getChildren().add(image);
        
             wellsGridPane.getChildren().add(pane);
             
             GridPane.setRowIndex(pane, i);
             GridPane.setColumnIndex(pane, j);
             j++;
        
             if (j == wellsGridPane.getColumnCount()) { 
                    i++;
                    j=0;
             }
         }
    }
    
    public void setStage(Stage stage) { 
        
        stage.setMinHeight(789);
        stage.setMinWidth(1016);
        
        stage.setMaxHeight(789);
        stage.setMaxWidth(1016);
        
        stage.setHeight(789);
        stage.setWidth(1016);
    }
}

Solution

Tthere is no real need to set the row and column width and height. Try the following controller which uses the image you posted:

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
 
public class Controller {
 
    private static final String B_AND_W_SQUARES_800X800 =   "https://i...content-available-to-author-only...r.com/SfZWK6g.jpg";
 
    private static final int ROWS = 6, COLS = 8;
    @FXML
    private GridPane wellsGridPane;
 
    @FXML
    private void Grid (ActionEvent event) {
      
        Image img =  new Image(B_AND_W_SQUARES_800X800,100,100,false,true,true);
 
         int i = 0, j = 0;
 
         for (int n=0; n< ROWS*COLS; n++) {
 
             ImageView image = new ImageView(img);
             StackPane pane = new StackPane(image);
             GridPane.setRowIndex(pane, i);
             GridPane.setColumnIndex(pane, j);
             wellsGridPane.getChildren().add(pane);
             //wellsGridPane.setHgap(10);   wellsGridPane.setVgap(10);
 
             j++;
 
             if (j == COLS) {
                    i++;
                    j=0;
             }
         }
    }
 
    public void setStage(Stage stage) {
 
        stage.setMinHeight(789);
        stage.setMinWidth(1016);
        stage.setMaxHeight(789);
        stage.setMaxWidth(1016);
        stage.setHeight(789);
        stage.setWidth(1016);
    }
}

Answered By - c0der
Answer Checked By - Cary Denson (JavaFixing Admin)