Radio Button List CustomCSS v9.2.1 (ButtonBar)

[M4RC]

Hello folks,

i have several questions about the Radio Button List in TWX 9.2.1.

Firstly, I would like to ask how I can create separator lines between the individual selection areas.

Furthermore, I don't understand how to address the Radio Button List with Custom CSS, for example to create a shadow.

Attached is an example of how the Radio Button List should look.

I am currently using this Custom CSS for the shadow, however it is not working.

• .radioBtnClass .widget-radiobuttonlist{
  box-shadow: 5px 5px 5px #888888;
  font-size: 10;
  }

Best regards

[VladimirN]

• Sample CSS code that adjusts the size of the Radio Button Widget

/* Adjust size of radio button to big circle*/
.widget-ptcsradio::part(circle){
    height:50px;
    width:50px;
}

Reference - "ThingwWorx Web Components customization with Visual SDK CSS": https://www.ptc.com/en/support/article/CS324593

[M4RC]

Hello Vladimir,

thank you very much for the quick reply.

Your described code refers to the Radio Button widget,

I needed help with the Type RadioButtonList. This is listed under Widgets as Button Bar Widget.

Best regards

[TravisPickett · Accepted solution]

Hi,

Here is some sample code that  should add a horizontal separator and box shadow.  radioCustomClass is the value of the CustomClass property for the buttonbar.

.radioCustomClass .widget-radiobuttonlist-wrapper{
    box-shadow: 5px 5px 5px #888888;
}

.radioCustomClass .widget-radiobuttonlist tr:not(:first-child) td{
    border-top-color: pink !important;
    border-top-width: 5px !important;
    border-top-style: solid !important;
}

 Thanks,

Travis