Radio buttons positioning

p5.js Coding Questions
1

Hi. I am trying to find a method to position radio buttons closer to each other vertically.
When I write :

radio = createRadio();
    radio.option('option-1');
    radio.option('option-2');
    radio.option('option-3');
    radio.style("width", "80px");
    radio.position(50, 50);

I get the vertical distance of the first group of this image. But I would like to achieve a very close distance like in the second group. I have tried a lot of different style options like:

radio.style(‘margin-top’, “-1px”)

, padding, etc., but nothing works. Is this possible?

radioButton

2 

  radio = createRadio();
  radio.option("option-1");
  radio.option("option-2");
  radio.option("option-3");
  let options = selectAll("input[type='radio']", radio);
  // Update the style for each option
  for (let opt of options) {
    opt.style("position", "relative");
    // The more negative these are the more the options will overlap
    opt.style("margin-top", "-1px");
    opt.style("margin-bottom", "-1px");
    // by default, when you mess with vertical spacing, the buttons get a
    // misaligned from the labels, adjust this to taste.
    opt.style("top", "2px");
  }
  radio.style("width", "80px");
  // radio inputs and labels are displayed inline, so line-height introduces
  // space between them when the wrap over multiple lines.
  radio.style("line-height", "0");
  radio.position(50, 50);

You could also do something similar with a stylesheet.

1 Like
3

Thank you so much for this!