Horizontally structured array items

[chinshr]

I would like to build forms layered horizontally within a form-group like "Primary Colors", "Secondary Colors", etc, see this:

However, I don't get the horizontal layout to work. No matter what I do, e.g. subforms it will always rendered as stacked, like this:

I would also like to customize the add/remove button, to be right after the color swatch (or on top). I was able to add a color picker control myself.

[stevehu]

It is controlled by CSS during the array rendering. I am sure it can be customize to display horizontal and flow to the next line. Take a look at css flexbox. The button is the same, you need to align it to the right. All the elements support style so I don't think you need to update the code but only passing in the style variable.

[chinshr]

@stevehu thanks for your reply. Can you point me to an example by any chance on how to pass in style? The form documentation is vague about custom styles and does not suggest css inline styles to work properly.

A reference to this and this suggested to do this, but it does not work:

                "htmlClass": "container foobar primaryColors",
                "fieldHtmlClass": "field foobar primaryColors",
                "labelHtmlClass": "label foobar primaryColors",

I was trying to style the section as you suggested without a lot of success, what am I doing wrong?:

...
          {
            "key": "styleGuide.colors",
            "style": { "selected": {"backgroundColor": "#00ff00"} },
            "items": [
              {
                "key": "styleGuide.colors.primaryColors",
                "add": "New",
                "style": {
                  "add": { "background-color": "#ff0000" },
                },
                "items": [
                  {
                    "key": "styleGuide.colors.primaryColors[].color",
                    "type": "color"
                  }
                ]
              }
            ]
          }
...

[stevehu]

I will add this as an option in the feature when I have time. It would be great if somebody can help.