Skip to content

Add 'grid' layout support to RectangularRadioButtonGroup. #972

@pixelzoom

Description

@pixelzoom

RectangularRadioButtonGroup lacks support for grid layout of radio buttons, a layout that has been requested in several sims: Calculus Grapher, Vector Addition, Projectile Sampling Distributions, ... A grid layout must currently be faked (see example below) and an API that naturally supports grid layout would be a big improvement.

For example in calculus-grapher CurveManipulationTypeRadioButtonGroup:

Image

To force the above grid layout required creative use of options, as shown below. Making this behave as desired was both difficult and brittle, easily broken by changes to the surround layout - see phetsims/calculus-grapher#401.

      // RectangularRadioButtonGroup does not support grid layout. These options are a bit of a hack to implement
      // a 2x2 grid. Values were set empirically to make the vertical and horizontal spacing look the same.
      // See https://github.com/phetsims/calculus-grapher/issues/351 and https://github.com/phetsims/calculus-grapher/issues/401.
      orientation: 'horizontal',
      preferredWidth: 155,
      widthSizable: false,
      justify: 'center',
      spacing: 5,
      wrap: true,
      lineSpacing: 5

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions