Adding a Boolean configuration property to an add-on

Mozilla IoT
#1

Is there some ‘trick’ to adding Boolean configuration properties to an add-on? When I tried to add one (in the timer add-on), the text gets overlapped with the surroundings.
image
This is from new code in manifest.json

image
image.png711×190 5.14 KB

and similar in package.json
image
image.png703×191 5.21 KB

The only trick I found so far is not to add the Boolean property at the end of the list, as the overlaps/confusion with that is even worse.

#2

Inspecting the CSS, I think that I may have the answer

in gateway/static/css/addons-form.css

#addon-config-settings .json-schema-form .checkbox {
  height: 2.3rem;

add

  display: inline-block;

Likely, this line should also be removed from

#addon-config-settings .json-schema-form input[type=checkbox] {

and

#addon-config-settings .json-schema-form .checkbox-title {

After, showing the improved layout and the CSS that ‘fixed it’

image
image.png395×511 16.8 KB

#3

The boolean layout is actually changing with the 0.10 release. Things seem to work fine there.

1 Like