Nur der linke Teil meiner Buttons ist anklickbar (JavaFX/FXML)

Question

Ich habe vor kurzem mit JavaFX angefangen, und ich bin auf ein ungewöhnliches Problem in meinem Code gestoßen, mit dem ich mich ziemlich verloren fühle.

Im Wesentlichen sind die Tasten korrekt in ihrem Controller verbunden und anklickbar, aber nur auf der linken 1/4 Teil. Es verhält sich fast so, als wäre etwas davor.

Ich poste den Code unten und drücke meine Finger, dass jemand etwas Offensichtliches sieht, das ich nicht sehe. Ich brauchte zwei Tage, um zu debuggen, warum die Tasten nur manchmal funktionierten, bevor ich erkannte, was das Problem war, wenn ich zufällig herumklickte.

Bitte beachten Sie, dass diese FXML Hälfte der Experimente mit verschiedenen Ankerplatten ist. Der Problembereich kann mit STRG + F "fooButton" gefunden werden. Es ist die linke Seite eines BorderPane.

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

<?import java.net.URL?> 
<?import javafx.geometry.Insets?> 
<?import javafx.scene.Cursor?> 
<?import javafx.scene.control.Button?> 
<?import javafx.scene.control.Label?> 
<?import javafx.scene.control.Tab?> 
<?import javafx.scene.control.TabPane?> 
<?import javafx.scene.control.TextField?> 
<?import javafx.scene.image.Image?> 
<?import javafx.scene.image.ImageView?> 
<?import javafx.scene.layout.AnchorPane?> 
<?import javafx.scene.layout.BorderPane?> 
<?import javafx.scene.layout.Pane?> 
<?import javafx.scene.layout.VBox?> 
<?import javafx.scene.text.Font?> 

<BorderPane fx:id="mainWindow" prefHeight="461.0" prefWidth="760.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="guiControllers.MainController"> 
    <top> 
     <Pane id="body" prefHeight="96.0" prefWidth="658.0" style="-fx-background-color: #243242; -fx-border-color: #0E141B; -fx-border-radius: 3;" stylesheets="@application.css" BorderPane.alignment="CENTER"> 
     <children> 
      <Label layoutX="103.0" layoutY="25.0" prefHeight="48.0" prefWidth="394.0" text="Title Here" textFill="WHITE"> 
       <font> 
        <Font name="Calibri Bold" size="41.0" /> 
       </font> 
      </Label> 
      <ImageView fitHeight="55.0" fitWidth="61.0" layoutX="25.0" layoutY="20.0" pickOnBounds="true" preserveRatio="true"> 
       <image> 
        <Image url="@../Res/mhlogo.png" /> 
       </image> 
      </ImageView> 
     </children> 
     </Pane> 
    </top> 
    <left> 
     <AnchorPane BorderPane.alignment="TOP_CENTER"> 
     <BorderPane.margin> 
      <Insets /> 
     </BorderPane.margin> 
     <children> 
      <VBox id="buttonBar" fx:id="buttonBar" alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="170.0" minWidth="170.0" prefHeight="365.0" prefWidth="170.0" style="-fx-background-color: #2E4055; -fx-border-radius: 3; -fx-border-color: #0E141B;"> 
       <children> 
        <AnchorPane prefHeight="365.0" prefWidth="309.0"> 
        <children> 
         <Pane layoutX="1.0" layoutY="2.0" prefHeight="41.0" prefWidth="167.0"> 
          <children> 
           <Pane layoutX="-1.0" layoutY="-2.0" prefHeight="33.0" prefWidth="169.0" style="-fx-background-color: #565656; -fx-border-color: #000000; -fx-border-radius: 20; -fx-background-radius: 20;"> 
           <children> 
            <ImageView fitHeight="19.0" fitWidth="18.0" layoutX="7.0" layoutY="7.0" pickOnBounds="true" preserveRatio="true"> 
             <image> 
              <Image url="@../Res/magnifying-glass.png" /> 
             </image> 
            </ImageView> 
            <TextField layoutX="29.0" layoutY="2.0" prefHeight="0.0" prefWidth="134.0" style="-fx-border-radius: 1; -fx-border-color: #111111; -fx-border-width: 2; -fx-background-color: #FFFFFF; -fx-background-radius: 20; -fx-border-radius: 20;" styleClass="stop-color-leaking" stylesheets="@../cSS/application.css" /> 
           </children> 
           </Pane> 
          </children> 
         </Pane> 
         <AnchorPane layoutX="3.0" layoutY="43.0"> 
          <children> 
           <Button id="fooButton" fx:id="fooButton" alignment="CENTER" contentDisplay="TOP" maxHeight="1.7976931348623157E308" maxWidth="167.0" minWidth="167.0" mnemonicParsing="false" onAction="#loadFooPame" prefWidth="167.0" style="-fx-background-color: #CDCDCD; -fx-border-color: #0E141B; -fx-border-radius: 3;" styleClass="mainFont" stylesheets="@../cSS/application.css" text="Find Patient" textAlignment="CENTER" textOverrun="CLIP" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" /> 
           <Button id="barButton" fx:id="barButton" alignment="CENTER" contentDisplay="TOP" layoutY="24.0" maxHeight="1.7976931348623157E308" maxWidth="167.0" minWidth="167.0" mnemonicParsing="false" onAction="#loadBarPane" prefHeight="24.0" prefWidth="167.0" style="-fx-background-color: #CDCDCD; -fx-border-color: #0E141B; -fx-border-radius: 3;" styleClass="mainFont" stylesheets="@../cSS/application.css" text="Add Appointments" textAlignment="CENTER" textOverrun="CLIP" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" /> 
          </children> 
         </AnchorPane> 
         <AnchorPane layoutX="1.0" layoutY="197.0" prefWidth="169.0"> 
          <children> 
           <ImageView id="settingsButton" fitHeight="38.0" fitWidth="48.0" layoutX="64.0" layoutY="130.0" pickOnBounds="true" preserveRatio="true"> 
           <image> 
            <Image url="@../Res/settings.png" /> 
           </image> 
           </ImageView> 
          </children> 
         </AnchorPane> 
        </children> 
        </AnchorPane> 
       </children> 
      </VBox> 
     </children> 
     </AnchorPane> 
    </left> 
    <right> 
     <TabPane id="tabPane" fx:id="tabPane" focusTraversable="false" prefHeight="365.0" prefWidth="166.0" rotateGraphic="true" style="-fx-background-color: # #414760;" styleClass="tab-header-background" tabClosingPolicy="UNAVAILABLE" BorderPane.alignment="CENTER"> 
     <tabs> 
      <Tab fx:id="notesTab" text="Notes"> 
      <content> 
       <AnchorPane maxWidth="400.0" minHeight="0.0" minWidth="200.0" prefHeight="336.0" prefWidth="216.0" style="-fx-border-color: #414760; -fx-background-radius: 3;" styleClass="tab-header-background" stylesheets="@../application/CSS/application.css" /> 
      </content> 
      </Tab> 
      <Tab fx:id="diagramTab" closable="false" text="Diagram" /> 
     </tabs> 
     <cursor> 
      <Cursor fx:constant="DEFAULT" /> 
     </cursor> 
     <stylesheets> 
      <URL value="@application.css" /> 
      <URL value="@../application/CSS/application.css" /> 
     </stylesheets> 
     </TabPane> 
    </right> 
    <center> 
     <AnchorPane id="centerAP" fx:id="centerAP" BorderPane.alignment="CENTER"> 
     </AnchorPane> 
    </center> 
</BorderPane> 

Irgendwelche Ideen?

Edit 2:

.

Edit 2:

Das Problem endete die Mittelfelder sind zu groß zu sein. Einfache Lösung, seltsames Problem zu diagnostizieren.

Answer 1

Versuchen Sie, die Hintergrundfarbe und die Rahmenfarbe von beiden Schaltflächen zu entfernen. Dann können Sie eine blaue Umrandung sehen, wenn Sie eine Schaltfläche auswählen. Sie können verwenden Sie die : Fokus CSS-Pseudo-Klasse, um die Farbe zu ändern oder einen Effekt zu geben, wenn die Schaltfläche ausgewählt ist.