JavaFX doesn't load css as it does in fxml

Question

I have defined a css stylesheet in my FXML file, which when opened with scenebuilder, it's displayed correctly, but when I run the program, it isn't. This confuses me...

This is what I'm working with:

├───bin
│   └───app
│           application.css
│           Fxml.fxml
│           Main.class
│
└───src
    └───app
            application.css
            Fxml.fxml
            Main.java

My Fxml.fxml file looks like this:

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import java.net.URL?>


<VBox prefHeight="100.0" xmlns="http://javafx.com/javafx/8"
    xmlns:fx="http://javafx.com/fxml/1">
    <children>
        <HBox prefHeight="20.0" />
        <TableView id="table" xmlns:fx="http://javafx.com/fxml">
            <columns>
                <TableColumn id="tablec_h_from" text="H_FROM" />
                <!-- other columns -->
            </columns>
        </TableView>
    </children>
    <stylesheets>
        <URL value="@application.css" />
    </stylesheets>
</VBox>

The application.css looks like this:

.table-column {
    -fx-pref-width: 55;
}

The Main.java:

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) {
            VBox root = null;
            try {
                root = (VBox)FXMLLoader.load(getClass().getResource("Fxml.fxml"));
            } catch (IOException e) {
                e.printStackTrace();
            }
            Scene scene = new Scene(root);

            primaryStage.setScene(scene);
            primaryStage.show();

    }
}

So, as I said earlier, when I open my FXML file with scene builder, the table columns are of the proper width of 55px, but when I run the program, the table columns are of a default width of 80 px. The goal is of course to have the width of the columns 55px.

Do I have to import the css file in Main.java, even if I've defined it in the fxml file? And if so, how?

I'm using eclipse IDE, and JavaFX version 2.2.45-b18

Any help is appreciated.

Answer 1

Alright, so the issue with this particular problem is the nature of TableColumn. It doesn't appear that TableColumn has any real binding with .css, and more than that, even if you access it via' it's css ID, the property -fx-pref-width doesn't seem to exist for it. Which is why you're not seeing any sort of change. Also, due to the potentially buggy nature of tableView in javafx at the moment, you MUST set a pref-width, or things can get a little strange. see This topic for an example of some of the strangeness.

Now, the solution to this is to create an fxml controller class and set the value of the width programmatically. I realize this might not be completely ideal for your solution, but it does seem to work just fine. for example:

my FXML.fxml:

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

<?import java.lang.*?>
<?import java.net.*?>
<?import java.net.URL?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox prefHeight="100.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2" fx:controller = "filechooserexample.fxmlController" >
  <children>
    <HBox prefHeight="20.0" />
    <TableView id="table">
      <columns>
        <TableColumn id="tablec_h_from" maxWidth="5000.0" minWidth="10.0" prefWidth="50.0" text="H_FROM" fx:id="myTableColumn" />
        <!-- other columns -->
      </columns>
      <stylesheets>
        <URL value="@application.css" />
      </stylesheets>
    </TableView>
  </children>
  <stylesheets>
    <URL value="@application.css" />
  </stylesheets>
</VBox>

my main class is identical, and now for my controller:

fxmlController.java: 

import java.net.URL;
import java.util.ResourceBundle;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.TableColumn;

/**
 *
 * @author William
 */
public class fxmlController implements Initializable{

    @FXML TableColumn myTableColumn;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        myTableColumn.setPrefWidth(200);
    }

}

pardon the weird 'filechooserexample' package tag in the fxml controller setter field, I'm reusing a mostly blank project I had already setup and everything. So, the code to set the controller would be: `fx:controller = "packageName.NameOfJavaClassNoExtension"'

with that code I was able to successfully set the pref width. Now, you can use css to style your table column, you just can't use -fx-pref-width, since I'm fairly certain that property doesn't exist. If you want a good guess as to what's allowed see: caspian.css leview-resize-after-been-moved Which is the default .css stylesheet for all of javafx. You'll likely find one or two properties outside of that, but not tons and tons that you'll see all the time.

Also worth noting, to properly access the table column, .table-column won't work, I don't think. You might have to add a style with getStyleClass().add("myCustomStyle");

which you can then access with .myCustomStyle

Good luck! I hope that helps.