JavaFX MouseEvent not firing inside ScrollPane (above ~15 pixels)

Question

Original Question

Progress to answer below

I want to have some thumbnails inside a ScrollPane. The thumbnails highlight when you mouse-over them.

The problem is, unless I apply scrollPane.setPadding(new Insets(15,0,0,0));, the listeners I have applied, (as well as the listeners for other controls such as Buttons) DO NOT FIRE. They only fire if the mouse is ~15 pixels below the top edge of the ScrollPane.

A. Shows no padding applied. (Red area shows approximate listener firing zone)

B. Shows 15px padding applied.

I was constantly clicking in both images. The Buttons only respond below ~15px too. So unless I have padding, you cannot interact with any controls along the top, buttons, labels etc.

How can I get around this, please?

The scrollPane is constructed by:

    parentStage = stage;
    parentScene = scene;
    mainStyle = mS;
    backgroundStyle = bS;
    highlightBackgroundStyle = hBS;
    selectionPanelRoot.setCenter(selectionScroller);
    selectionPanelRoot.setBottom(bottomButtons);
    bottomButtons.setLeft(generalButtons);
    bottomButtons.setRight(moreButtons);
    selectionScroller.setContent(selectionContent);
    selectionContent.setPrefWrapLength(Double.MAX_VALUE);
    selectionContent.setHgap(10);
    selectionContent.setVgap(10);
    //selectionContent.setPadding(new Insets(15,0,0,0)); //<-- Uncomment to achieve what is shown in Image B.
    selectionScroller.setMinHeight(280);
    selectionScroller.setPrefSize(Double.MAX_VALUE , Double.MAX_VALUE);

The thumbnails consist of:

    mediaPanel = mSP;
    parentStage = stage;
    parentScene = scene;
    mainStyle = mS;
    backgroundStyle = bS;
    highlightBackgroundStyle = hBS;
    

    root.setPrefSize(100, 140);
    //root.setOpaqueInsets(new Insets(10, 10, 10, 10));
    root.setTop(topInfoRow);
    root.setCenter(view);
    root.setBottom(keySelector);
    
    topInfoRow.setLeft(timeLabel);
    topInfoRow.setCenter(testButton);
    topInfoRow.setRight(closeButton);
    closeButton.setAlignment(Pos.CENTER_RIGHT);

    
    closeButton.setGraphic(closeButtonView);
    view.setVisible(true);
    view.setFitWidth(130);
    view.setFitHeight(100);

    
    
    
    keySelector.setEditable(false);
    keySelector.setFocusTraversable(false);
    keySelector.setText("No Key");

---

Progress

I have made a bit of progress with answering this question.

The scrollPane is actually added to a BorderPane layout, right in the "Centre". By default, there are margins between components in the BorderPane (I don't know how to change this!). But if I simply add in something to the "Top" of the BorderPane, the problem is resolved.

The BorderPane Layout:

Seemingly, adding something in the top pushes down the scrollPaneby the ~15 pixels which are causing the problem. So it's as if originally the scrollPane was occupying the area at the "Top" which it shouldn't have been doing so.

After Adding some Text to the "Top"

Answer 1

(This is a longshot but I'm assuming you're looking for clues, rather than a fixed code - since you went for screenshots rather than MCVE, as others say.)

I would look outside your scrollPane code, at how the scene is set up and how java code and CSS interact (ifterfere?). Padding is set by both Java code and CSS. Even if you don't set CSS there appears to be some predefined styling applied by the browser.

See this, for example: JavaFX: Cannot set font size programmatically after font being set by CSS (Sergey Grinev's answer)

The JavaFX CSS implementation applies the following order of precedence; a style from a user agent style sheet has lower priority than a value set from code, which has lower priority than a Scene or Parent style sheet. Inline styles have highest precedence.