-1

I am making a cross number puzzle game (cross word with numbers). For the actual puzzle itself, I have a grid pane containing stack panes (the squares of puzzle grid). Some of the stack panes have labels in their corners to denote the start of a question and some of them have text fields for the user to write their answers. I have added a listener to each stack pane so that when its height changes, it will also change the font size of the text field attached to that stack pane. Here is the code:

      ChangeListener<Number> squareSizeListener = (observable, oldValue, newValue) -> {
            textField.setStyle("-fx-font-size: " + (newValue.intValue() / 4));
      };
      square.heightProperty().addListener(squareSizeListener);

I use an identical listener to change the size of the label denoting the question number. While this does the job of changing the font size of the text field and question numbers as I resize the window (and hence the stack panes), I have come across a strange problem where, while resizing the window, a smaller version of the text will very briefly appear instead of the text and then quickly dissapear. This smaller text is always the same size and colour. It's as if it reseting the style of the text to a default before applying the new one.

Here is a video of what I am talking about.

I have no clue why this is happening and I have been unable to find anything regarding this online. I've tried changing the stack pane to a different container but encountered the same issue. Could someone please help me figure out whats going on?

Many thanks!

PS. If someone also knows that the outline of the text field is also dissappearing and reappearing, I would be very grateful!

EDIT: So somehow I stumbled upon a solution. I don't know why or how it works, but it does. Calling the applyCss method on the textfield/label after changing their fonts using setStyle seems to fix the problem.

Meezeus
  • 41
  • 2
  • I can't see the effect from the video. Check [this approach](https://stackoverflow.com/a/63586337/2189127) though, it may work in this context. – James_D Aug 25 '20 at 20:34
  • I recommend changing the playback speed to 0.25, it makes it a lot easier to see. Alternatively, [here is a screenshot](https://imgur.com/a/bfpO1Hv) I got from the video. In the screenshot the question labels (abcdefg) are very small for some reason, the effect which I am talking about. In the second screenshot, the three textfields at the bottom have dissapeared and the large red 4 that was in one of them has been replaced by a small black 4. I will check out your link, but I am also interested as to what is taking place in my example. – Meezeus Aug 26 '20 at 15:00
  • [mcve] please .. – kleopatra Aug 27 '20 at 10:29

1 Answers1

0

So somehow I stumbled upon a solution. I don't know why or how it works, but it does. Calling the applyCss method on the textfield/label after changing their fonts using setStyle seems to fix the problem.

Meezeus
  • 41
  • 2