Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Radio group items with border per item

    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?
    Click image for larger version

Name:	RadioGroup.png
Views:	18
Size:	77.4 KB
ID:	263545

    #2
    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
    Code:
    {
    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
    Last edited by janusz; 17th Sep 2020, 08:48.

    Comment


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

      Comment

      Working...
      X