Is it possible to arange Radio/Checkbox Options vertical?

General
1

Using Checkbox and Radiobuttons in Vanialla renderer are always displayed horizontal.

image

Is there also a way to display the options vertical? Or is it possible to provide a control with an additional custom class name?

2

I now realized that the arrangement is already done by a flex layout.

So the question is: how can I overwrite the flex-direction from column to row?

3

Hi @rsoika,

Sadly the flex-directron is directly set on the style attribute of the element without a way to override it with the offered React Vanilla CSS customization mechanic.

Therefore you either need to use a custom renderer which sets the attribute appropriately or you fall back to use !important in your CSS to override the style attribute, e.g.

.control > .radio {
    flex-direction: column !important;
}
4

Thanks, just to clarify this: In vanilla renderer it is possible to set additional classes - right?

    {
      "type": "Control",
      "scope": "#/properties/myProperty",
      "options": {
        "label": "My Control",
        "classNames": ["my-custom-class"]
      }
    }

or is this not possible? Overwriting the css attribute with !important seems not to be so bad.

.control.my-custom-class > .radio {
    flex-direction: column !important;
}
5

Ok, it seems to be more complex.

When I look into the code the RadioGroup.tsx looks like this:

  const hasRadioClass = !radioControl || radioControl === 'radio';
  let groupStyle: { [x: string]: any } = {};
  if (hasRadioClass) {
    groupStyle = {
      display: 'flex',
      flexDirection: 'row'
    };
  }
  return (
    <div
      className={classNames.wrapper}
      hidden={!visible}
      onFocus={() => setFocus(true)}
      onBlur={() => setFocus(false)}
    >

      <div className={radioControl} style={groupStyle}>
        {options.map(option => (
          <div key={option.label} className={radioOption}>
            <input
              type='radio'
              value={option.value}
              id={option.value}
              name={id}
              checked={data === option.value}
              onChange={ev => handleChange(path, ev.currentTarget.value)}
              disabled={!enabled}
              className={radioInput}
            />
 ......

I have a view questions:

Instead of the style attribute, wouldn’t it be more flexible to provide a CSS class for this?

Is there a way how I can extend the out div className? I do not understand the {classNames.wrapper} . Is it possible to add additional classes to the component?

6

It’s possible but in a different way. See this guide for the React Vanilla customization approach.

Sadly we don’t have support to influence the CSS classes of the respective control via the UI Schema in the React Vanilla renderers.

Yes it’s probably the most pragmatic approach.

Yes definitely, that would be much better.

What you can do here is to customize radio.control via the guide above and return your custom CSS class which will then be used for radioControl. However note that then the hard coded style attribute is no longer applied, so you would need to readd this again via your CSS.

Sadly this still allows only form-wide customization of the radio controls, not controlling the horizontal/vertical rendering via the UI Schema. If that is something you need you will need to support this via a custom renderer.

7

Hi Stefan,

I think about to take a closer look into the radio control issue and maybe I am able to provide some new feature to give the user more control about the layout. (You know, I’m not the JavaScript god :wink: but I will give it a try… )

I now see that in version 3.1.0-ALPHA there is also a new implementation with the oneOf feature for radio buttons, that we have discussed here.

Is this right? Are you working on this feature for the vanilla renderer? This would be a very important feature for my current Open-BPMN project.

Regarding the Readio-Button Layout problem, my idea to solve this issue is by:

  • either providing a new option orientation=vertically|horizontally 
          "options": {
            "format": "radio"
            "orientation": "vertical"
          }
  • or by providing a way to set an optional style-class
          "options": {
            "format": "radio"
            "classname": "my-class"
          }

What do you think about this?

8

The implementation was done already a while ago. Currently we don’t plan to add the oneOf enum ourselves in the near future. However this should be very easy to implement.

In general I would prefer the classname approach but in a more generic way which allows to overwrite all css classes used in the renderer. For now I think the specific solution with the orientation should be sufficient.