JavaFX's ComboBox doesn't work in fullscreen

Troubleshooting gui
1

I’m using the JME3-JFX plugin, but it seems that the ComboBox only is working in window mode.

I can expand and see the options in fullscreen mode, but I can’t select any items; instead it seems like the mouse is hovering over components behind the selection area in the ComboBox.

It doesn’t matter if I start the game in fullscreen or window mode and then switch between modes, the problem still exist in fullcreeen, but doesn’t exist in window mode.

I’m using Windows 7 and Java 1.8.0_51.

<properties>
   <jme3.groupId>com.github.jMonkeyEngine.jmonkeyengine</jme3.groupId>
   <jme3.version>57dd2748e2</jme3.version>
</properties>
<dependency>
   <groupId>${jme3.groupId}</groupId>
   <artifactId>jme3-core</artifactId>
   <version>${jme3.version}</version>
</dependency>
<dependency>
   <groupId>${jme3.groupId}</groupId>
   <artifactId>jme3-lwjgl</artifactId>
   <version>${jme3.version}</version>
</dependency>
<dependency>
   <groupId>${jme3.groupId}</groupId>
   <artifactId>jme3-desktop</artifactId>
   <version>${jme3.version}</version>
</dependency>
<dependency>
   <groupId>com.jme3x</groupId>
   <artifactId>jfx</artifactId>
   <version>1.159.2015-07-12_153501-ddfdf01</version>
</dependency>

The window look like this:

jme3-combobox.png1040×806 210 KB

settings.fxml:

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

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

<BorderPane id="settingsContent" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="1024.0" prefWidth="1280.0" stylesheets="@settings.css" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.kendanware.tower.game.menu.SettingsController">
   <top>
      <HBox prefHeight="90.0" prefWidth="200.0" style="-fx-background-color: #0e1111;" BorderPane.alignment="CENTER">
         <children>
            <Label prefHeight="90.0" text="Settings" textFill="WHITE" HBox.hgrow="ALWAYS">
               <padding>
                  <Insets left="20.0" />
               </padding>
               <font>
                  <Font size="36.0" />
               </font>
            </Label>
         </children>
      </HBox>
   </top>
   <bottom>
      <BorderPane prefHeight="90.0" prefWidth="200.0" style="-fx-background-color: #0e1111;" BorderPane.alignment="CENTER">
         <left>
            <Button fx:id="buttonBack" mnemonicParsing="false" onAction="#handleButtonBackAction" text="Back" BorderPane.alignment="CENTER">
               <BorderPane.margin>
                  <Insets left="40.0" />
               </BorderPane.margin>
            </Button>
         </left>
         <right>
            <Button fx:id="buttonApply" mnemonicParsing="false" onAction="#handleButtonApplyAction" text="Apply" BorderPane.alignment="CENTER">
               <BorderPane.margin>
                  <Insets right="40.0" />
               </BorderPane.margin>
            </Button>
         </right>
      </BorderPane>
   </bottom>
   <center>
      <StackPane maxHeight="-Infinity" maxWidth="-Infinity" BorderPane.alignment="CENTER">
         <children>
            <TabPane style="-fx-background-color: #eeeeee;" tabClosingPolicy="UNAVAILABLE">
              <tabs>
                <Tab text="Video">
                     <content>
                        <GridPane prefWidth="900.0">
                          <columnConstraints>
                              <ColumnConstraints hgrow="ALWAYS" maxWidth="10.0" minWidth="5.0" prefWidth="5.0" />
                            <ColumnConstraints hgrow="ALWAYS" maxWidth="600.0" minWidth="10.0" prefWidth="300.0" />
                            <ColumnConstraints hgrow="ALWAYS" maxWidth="600.0" minWidth="10.0" prefWidth="300.0" />
                          </columnConstraints>
                          <rowConstraints>
                            <RowConstraints maxHeight="266.0" minHeight="6.0" prefHeight="35.0" vgrow="NEVER" />
                            <RowConstraints maxHeight="646.0" minHeight="0.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                              <RowConstraints maxHeight="646.0" minHeight="10.0" prefHeight="35.0" vgrow="NEVER" />
                            <RowConstraints maxHeight="736.0" minHeight="10.0" prefHeight="35.0" vgrow="ALWAYS" />
                          </rowConstraints>
                           <children>
                              <Label fx:id="labelResolution" text="Resolution" GridPane.columnIndex="1">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelFullscreen" text="Fullscreen" GridPane.columnIndex="1" GridPane.rowIndex="1">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelVSync" text="Vertical sync" GridPane.columnIndex="1" GridPane.rowIndex="2">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelTextureFiltering" text="Texture filtering" GridPane.columnIndex="1" GridPane.rowIndex="3">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelMultisamplingAntiAliasing" text="Multisampling anti-aliasing" GridPane.columnIndex="1" GridPane.rowIndex="4">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelFastApproximateAntiAliasing" text="Fast approximate anti-aliasing" GridPane.columnIndex="1" GridPane.rowIndex="5">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelShadowQuality" text="Shadow quality" GridPane.columnIndex="1" GridPane.rowIndex="6">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <Label fx:id="labelAmbientOcclusion" text="Ambient occlusion" GridPane.columnIndex="1" GridPane.rowIndex="7">
                                 <font>
                                    <Font size="18.0" />
                                 </font>
                              </Label>
                              <ComboBox fx:id="resolution" prefWidth="250.0" GridPane.columnIndex="2" />
                              <CheckBox fx:id="fullscreen" mnemonicParsing="false" GridPane.columnIndex="2" GridPane.rowIndex="1" />
                              <CheckBox fx:id="vSync" mnemonicParsing="false" GridPane.columnIndex="2" GridPane.rowIndex="2" />
                              <ComboBox fx:id="multisamplingAntiAliasing" prefWidth="150.0" GridPane.columnIndex="2" GridPane.rowIndex="4" />
                              <CheckBox fx:id="fastApproximateAntiAliasing" mnemonicParsing="false" GridPane.columnIndex="2" GridPane.rowIndex="5" />
                              <ComboBox fx:id="shadowQuality" prefWidth="150.0" GridPane.columnIndex="2" GridPane.rowIndex="6" />
                              <CheckBox fx:id="ambientOcclusion" mnemonicParsing="false" GridPane.columnIndex="2" GridPane.rowIndex="7" />
                              <HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="2" GridPane.rowIndex="3">
                                 <children>
                                    <RadioButton mnemonicParsing="false" prefWidth="70.0" text="Off">
                                       <toggleGroup>
                                          <ToggleGroup fx:id="textureAnisotropy" />
                                       </toggleGroup>
                                    </RadioButton>
                                    <RadioButton mnemonicParsing="false" prefWidth="70.0" text="x2" toggleGroup="$textureAnisotropy" />
                                    <RadioButton mnemonicParsing="false" prefWidth="70.0" text="x4" toggleGroup="$textureAnisotropy" />
                                    <RadioButton mnemonicParsing="false" prefWidth="70.0" text="x8" toggleGroup="$textureAnisotropy" />
                                 </children>
                              </HBox>
                           </children>
                        </GridPane>
                     </content>
                </Tab>
                <Tab text="Audio">
                  <content>
                    <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="180.0" prefWidth="200.0" />
                  </content>
                </Tab>
              </tabs>
            </TabPane>
         </children>
      </StackPane>
   </center>
</BorderPane>

Does anyone have the same problem, or do you have a workaround?

2

The guimanager has a boolean fullscreen, is it set to true correctly?

3

Thanks for the quick reply.

It was true for both window and fullscreen mode. Switched it to false (just to test it) and tried in both modes, but the only difference that could see was that the ComboBox’s drop down menu didn’t show in fullscreen (probably expected). I can see the “drop down menu” when I expand the ComboBox when fullscreen is true, but it seems that I click through the drop down menu. I can check and uncheck CheckBoxes behind the menu.

Should I do a Platform.exit() before I do SimpleApplication.restart() ? The GuiManager is created in simpleAppInit() with fullscreen=true and is ignoring fullscreen or window mode as it is right now.

4

Platform exit should not be necessary, no.

I know that there is some trickery involved in handling the popup stuff with jfx, but sadly I did not wrote it, so I cannot really say what the problem is.

→ My own game only use windows fullscreen, wich works as expected. (lwjgl hidden switches to disable window boarders, and force resolution = native one)

5

Ok, thanks anyway.

I will do some more tests and see if I manage to solve it.

6

Hi I have the same problem, have you solved it?

7

I have no idea if he solved the problem, and I had not looked further into it so far, however another solution might exist:

Write your own Combobox like class, that simple uses a normal pane for the popup and attaches it to the combobox, instead of relying on a native undecorated window.
You can probably reuse the content ui classes of the popup and only need to write the container on your own.

8

I’m so sad :smiley: , :wink: lets try it…

9

Well, solved it by not using combo boxes. I didn’t put much effort to it though.

10

Yeah what @Kecon said is what we do now in Skylimit Tycoon, just avoid them :smile:

New updated gui for the graphics settings now look like this. Colours and background image will most likely be changed later on.

20150912-195020.png1920×1080 808 KB

1 Like
11

Hi, that settings screen looks really good. Could you provide some info on what you did to modify the javafx theme?

12

Well, basically we’ve created a new css file and added it to the root pane, currently a StackPane.

stackPane.getStylesheets().add("interface/style.css");

Then in this css file we’ve overridden the standard styling of some components such as the tab panec scroll pane and button.

* {
    color-primary-0: rgba(11, 97,164, 0.75);
    color-primary-1: #508CBB;
    color-primary-2: #2E74AA;
    color-primary-3: rgba(8, 75, 127, 0.75);
    color-primary-4: #053A64;

    color-text-light: #ffffff;

    -fx-font-family:  'Helvetica';
    -fx-text-fill: color-text-light;
}

.button {
    -fx-background-color: color-primary-0;
    -fx-background-radius: 0;
}

.button:hover {
    -fx-background-color: color-primary-4;
}

That’s more or less it, you can open up modena.css in the JavaFX jar and have a look at what the default styling looks like and what selectors to use.

One thing to note here is that JavaFX can work with em units, however if you want to change the base of this unit to tell JavaFX how much 1em equals you need to essentially add a -fx-font-size: XXpx; entry to your root pane. We did this by calculating line height based on having 40 lines of text on the screen, this works for us but you might want to change it for your game/application.

final int fontSize = resolution.getY() / 40;
root.setStyle("-fx-font-size: " + fontSize + "px;");

This will set the base font size on our root pane to 1 / 40 of the screen height which in turn means that the UI scales based on selected resolution. Hope that makes sense.

2 Likes