JavaFX: Thick TextBox Borders

Being the UI geek that I am, I wanted to look at borders in JavaFX, as I had noticed that there seemed to be some inconsistencies. It turns out that I shouldn’t have been too worried – it appears that only one control looks bad, and it is the TextBox control. Shown below is a screenshot of a demo application I wrote, which has a number of controls placed in it.


Note that the borders of all controls look pretty similar – a single pixel width and all a dark grey. Swing suffered from border abuse and inconsistent border colours, so I am happy to see JavaFX is much better.

As mentioned, the only exception is the TextBox, which in the screenshot says ‘Original’. I think it’s probably agreeable to most people that this control has a border which is too thick (and a font which is not consistent with the font used in other controls). To fix the border inconsistency is actually quite simple, as shown in the TextBox directly beneath the original which shows ‘Fixed’. I think it’s probably agreeable that this fits it better with the other controls.

Finally, beneath the ‘Fixed’ TextBox is the text ‘Invisible’, which is actually also a TextBox with no border being shown. I include this for a reason, which will become clear soon.

Anyway, on to the fix – it’s simply a matter of changing the style by adding a line of CSS. The code for the three text boxes is shown below, in the same order as shown in the screenshot.

In otherwords, to fix the border problem, you need to set the border-width to 0, which doesn’t seem correct – you’d expect a control with a border-width of 0 to have an invisible border. In fact, to get an invisible border is shown in the last TextBox – you have to set border-width to be -1.

So, perhaps this is a bug, or perhaps it’s a design choice. I thought I would document it here so that people searching Google for answers might discover it without having to do trial and error. Perhaps this might be fixed in a future JavaFX release.

Additionally, the TextBox font also seems to be inconsistent, but I won’t bother to discuss this as I would hope anyone reviewing this post will also realise they need to fix the font. Perhaps this may be fixed in a future JavaFX release too.

18 thoughts on “JavaFX: Thick TextBox Borders”

    1. @Matthew: Thanks for the response. I agree some of the controls are a bit buggy, but they are showing good potential, given they are new releases.

      I suspect the TextBox doesn’t resemble the other controls because it was released prior to the other controls that were part of JavaFX 1.2, and perhaps the Caspian skin hasn’t been fully developed so far to include the TextBox component.

      1. Don’t be shy about filing bugs for these kinds of UI issues, with all the many issues we have to fix sometimes things get lost, so its good to have them in the system!

  1. I should note that the text field component has at least been considered as part of the Caspian skin, as it is shown in Jaspers post.

    I’m guessing that sooner or later TextBox components will been updated to look like what you see in the screenshot on that blog.

    1. @codecraig: No, border-style: none does not work – the result is the same as if no style is set at all. So, for now the best approach is to use my suggestion, but ideally this will be resolved when the Caspian skin is applied to the TextBox component, which I’m sure will happen in the next released.

      1. Well that’s strange…in fact your work-around is strange. You would think if the border-width is ‘0’ or border-style is ‘none’ that you would get no border.

        Hopefully they fix that so that the CSS support is more complete.

        1. Ya, I would have expected border-style: none to work, that it doesn’t should definitely be considered a bug.

          A border width of 0 is a different story though, I’m not sure which is the best way to take it. The problem is that since the beginning of time (well at least since the beginning of Java2D and I suspect it is a feature of postscript as well, though I haven’t confirmed it) a 0 width in Java2D means “hairline”. So the behavior you see here is just a manifestation of the underlying Java2D.

          I’m not a big fan of carrying historical significance around, so perhaps this should be a bug and 0 means, well, 0?

          1. I agree, 0 should be ‘none’.

            Not that I’ve tried, but it also makes programatically changing it easy, I can transition from 5 to 0, not 5 to ‘none’.

        1. Perhaps it is. Jasper does run a Mac, but then all the other fonts in my screenshot above adopt the correct font. The only control that doesn’t is the TextBox.

  2. Both should be the same font “Verdana” but rendered by different engines. The pic in the design blog was done in Photoshop with their render that has more control of the antialiasing effecting perceived weight. On Mac JavaFX & Java use native font rendering, on Windows its more complicated depending on Java version and system settings. Either way they are all very different at rendering the same font 🙁

  3. Jasper, perhaps you answered this, but why does the TextBox font appear to be different than the font in the other controls in my screenshot above?

    1. Don’t think its but hard to tell with windows horrible font rendering. What bugs me is Windows makes all fonts look the same at small sizes as it sacrifices design for readability. I am working on a fix that will give you a choice of rendering in FX to choose if you want smoother more true rendering of fonts. Which is what designers like.

      1. Interesting. I just did a quick test where I put a default TextBox side by side with one where I set the font to be 11pt Verdana. As I thought – this fit far more into the look of the other controls than the default font. It seems as if the TextBox font is not being set correctly on my computer, which is a pretty standard Vista box. From the screenshots I’ve seen around the web, the font (and border) isn’t being set correctly in other deployments of the TextBox control.

        I can post a picture if you’d like to see how it looks on my machine.

Comments are closed.