[FIXED] Responsive padding

Issue

BACKGROUND:

JavaFX offers multiple layout classes in order to design responsive applications. Sometimes, things like paddings and spacings have to be specified (in px) in order to keep application in good visual shape. Things like fonts are dpi-aware, so we don't have to worry about the sizes of such.

PROBLEM:

Paddings specified in pixels are not dpi-aware, will be always the same.

POTENTIAL SOLUTIONS:

1. Calculate paddings and spacings in relation to screen size, eg.

    public static double calculate(double sizeOnFullHdScreen) {
        return (SCREEN_PIXELS / FULL_HD_SCREEN_PIXELS) * sizeOnFullHdScreen;
    }

2. Using invisible texts (as mentioned earlier, fonts and texts are dpi-aware)

QUESTION:

Is there any better solution than proposed?

Solution

Assuming you are using a stylesheet to define the padding, you can use units of em to solve this problem.

This is how this is handled internally for JavaFX controls. From the comments in the header section of the modena.css stylesheet:

RESIZING FOR DIFFERENT SCREEN DPI

When the screen DPI changes Windows will use a different font size by default. The default is 12px and can change to 15px or 18px depending on user preference or screen DPI. On Mac the default is 13px and embedded will depend on hardware. To make UI controls scale and be the right proportions for each of these font sizes we base the padding (which controls size of control) on the font size. This is done using the CSS measurement unit of a "em" where (1em = font size). The default sizes are based on Windows default of 12px, as a quick reference here are common px sizes in em units on windows.

(My emphasis.)

Answered By - James_D
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)