Radio button alignment

#1

Hi Team,
we have 15 radio buttons dynamically render by JSON-forms. we want to align a radio button in 5X3 format (5 rows and 3 columns) . is there any solution to align a radio button in horizontally ?.

please refer my code,

{“jsnSchema”:
{“title”:“Radio Button”,
“type”:“object”,
“properties”:
{
“Radio Button”:
{“enum”:[“11111111111111111111111”,
“111111111111111111111122”,
“111111111111111111111111”,
“111111111111111111111113”,
“111111111111111111111114”,
“111111111111111111111116”,
“111111111111111111111112”,
“111111111111111111111115”,
“111111111111111111111117”,
“111111111111111111111118”,
“111111111111111111111119”,
“111111111111111111111110”,
“111111111111111111111121”,
“111111111111111111111123”,
“111111111111111111111124”]
}
}
},
“jsnUIschema”:
{
“label”:“Radio Button”,
“type”:“Group”,
“elements”:
[{“type”:“VerticalLayout”,
“elements”:
[{“type”:“HorizontalLayout”,
“elements”:
[{“type”:“Control”,
“label”:"",
“scope”:"#/properties/Radio Button",
“options”:{“format”:“radio”}
}]
}]
}]
}
}

#2

Hi @murugan,

We don’t offer some kind of Grid layout, just the basic Vertical and Horizontal. If you require something like this then you need to implement a custom renderer.

I would probably go with either a custom UI Schema element type (e.g. Grid) or some custom options on for example Group. Using for example Material UI’s grid this should be relatively straightforward.