5

I know there are plenty of solutions out there to help with changing the size of a radio button or check box, but I need a way to make the size relative using em in my .css file or some other inline solution.

I'm trying to get my controls to appear the same size in 720p, 1080p and 4K. All other controls besides RadioButton and CheckBox have worked by using em for whatever selector(s) controls size. I'll include some relevant code snippets below for each control.

RadioButton.css (the base font size is defined in another file)

.RadioButton {
    -fx-font-size: 1em;
}

.RadioButton .radio  {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:focused .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton:hover .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}
.RadioButton:armed .radio {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.833333em;
    -fx-padding: 0.5em;
}

.RadioButton .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.4em;
}

.RadioButton:selected .dot {
    -fx-background-insets: 0em;
}

Screenshots

4K 1080p 720p

When all of this is used the RadioButton gets larger and larger as the resolution goes from 4K -> 1080p -> 720p This makes me think that there is still some part of the control that is using its own internal hard size. I know usually you just change the padding value to achieve different sizes, but as you can see the padding values are already set in here with em.

Checkbox.css

.CheckBox {
    -fx-font-size:  1em;
}

.CheckBox .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.5em;
}

.CheckBox:focused .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:hover .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox:armed .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
}

.CheckBox .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.5em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

Screenshots

4K 1080p 720p

This one is very similar to the RadioButton file where all values are using em instead of hard values. Could the -fx-shape that is part of the mark cause all of the em values to fail because it is a hard value?

Expectation

My end goal is to have radio buttons and check boxes stay exactly(extremely close) to the same size at different resolutions.

Slaw
  • 37,820
  • 8
  • 53
  • 80
Alex Johnson
  • 504
  • 5
  • 15
  • 1
    If you want the checkbox and radios to stay the same size, do not set their values to relative units such as: **`em`**, `rem`, percentages, etc. nor should you use any intrinsic units either such as: `vh`, `vw`, etc. Use absolute units like `px` . BTW AFAIK, the pseudo-class `:armed` is not standard CSS...it sounds like the valid pseudo-class `:checked`. – zer00ne Apr 01 '20 at 21:28
  • @zer00ne `:armed` is JavaFX-specific. – Slaw Apr 02 '20 at 05:59
  • @zer00ne but how would using an absolute value keep them the same size visually? It would literally keep them the same size, but that means that at different resolutions they would visually grow or shrink as the dpi increased or decreased. I want the size to change for each resolution so they visually appear the exact same; hence the relative units. – Alex Johnson Apr 02 '20 at 16:54
  • have you tried `rem` instead of `em`? `em` is relative to its parent, `rem` is relative to the root (html) font size. – Tijmen Apr 07 '20 at 09:02

2 Answers2

3

Not sure if I answering yopur question, I don't know anything about javafx.

But in plain CSS, this seems to work:

div {
    margin: 10px;
}

#container1 {
    font-size: 20px;
}

#container2 {
    font-size: 30px;
}

#container3 {
    font-size: 40px;
}

input {
    font-size: inherit;
    width: 0.8em;
    height: 0.8em;
}
<div id="container1">
  <input type="radio" id="r1" name="test" 
         checked>
  <label for="r1">elem 1</label>
  <input type="radio" id="r2" name="test">
  <label for="r2">elem 2</label>
</div>
<div id="container2">
  <input type="radio" id="r21" name="test2" 
         checked>
  <label for="r21">elem 1</label>
  <input type="radio" id="r22" name="test2">
  <label for="r22">elem 2</label>
</div>
<div id="container3">
  <input type="radio" id="r31" name="test3" 
         checked>
  <label for="r31">elem 1</label>
  <input type="radio" id="r32" name="test3">
  <label for="r32">elem 2</label>
</div>
vals
  • 61,425
  • 11
  • 89
  • 138
  • 1
    This does work for HTML, but with JavaFX controls the CSS works a little different. HTML's usage is much more clean. Thanks for the answer though! – Alex Johnson Apr 13 '20 at 16:07
1

Alright I found an answer to my own question by using the utility created by this post and changing it a little bit to fit my needs. Most all of my code was fine, but the selectors I was using didn't seem to work for these two. I'll put the two altered files below...

RadioButton

.radio-button {
    /*-fx-font-size: 1em;*/
}

.radio-button .radio  {
    -fx-background-insets: 0em;
    -fx-border-insets: 0em;
    -fx-border-radius: 1em;
    -fx-padding: 0.25em;
}

.radio-button .dot {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.833333em;
    -fx-padding: 0.3em;
}

These were the only selectors needed for size changes. I had some of the other selectors for hover, focused, and such, but they were only for style with no size changes. The one big change was

.RadioButton -> .radio-button

CheckBox

.check-box {
    /*-fx-font-size: 1em;*/
}

.check-box .box {
    -fx-background-insets: 0em;
    -fx-background-radius: 0.166667em;
    -fx-border-insets: 0em;
    -fx-border-radius: 0.166667em;
    -fx-padding: 0.2em;
}

.check-box .mark {
    -fx-background-insets: 0.083333em 0em 0.083333em 0em, 0em;
    -fx-padding: 0.4em;
    -fx-shape: "M0,4H2L3,6L6,0H8L4,8H2Z";
}

Just like with RadioButton there were other selectors used for style, but not for sizing. All of the hover, focused, etc selectors will just default to the default values that I also used in the .box selector. The two -fx-padding tags affect the size of the mark and the box, and they were changed a little from my question. The main change though, just like RadioButton, was changing from

.CheckBox -> .check-box

I still don't really understand why this would cause any issue cause as long as the stylesheets are getting added correctly they should bothwork, but in my case the .check-box was the only one that functioned how I wanted.

Hopefully this helps anyone with similar issues!

Alex Johnson
  • 504
  • 5
  • 15