Radio group items with border per item

[chris@umed.io]

The radioGroup field type supports clicking outside of the actual circle including on the text for the radioGroupItem.
I would like to make it more obvious to the user they can click the text by enclosing each option in a border and perhaps a slightly different background color to make each item look more like q button as shown below in a mockup. I have tried various attributes but no luck so far and not found any posts on this.
Does anyone know of a way to accomplish this wih a simple attribute setting?

[janusz]

Hi,

I was just styling radio group, when I saw your post.

Create your own CSS class and set it using https://www.smartclient.com/smartcli...m.textBoxStyle.

There is also unsupported, undocumented... method getTextBoxCSS (but easier to start) , that you can use like this

{
name: "option",
title: "Radio Group",
type: "radioGroup",
useNativeRadioItems: false,
checkboxItemProperties: {
getTextBoxCSS: function() {
return this.Super("getTextBoxCSS", arguments) + ";border:1px black solid";
},
},
valueMap: {
"option_1": "Option 1",
"option_2": "Option 2",
}
}

I haven't try with native radio buttons though.

Best regards,
Janusz

[Isomorphic]

This will break sizing elsewhere in the form, so don't use this approach, use standard CSS styling (just see form docs).