Skip to main content
M
M4RC14-Alexandrite
14-Alexandrite
October 22, 2021
Solved

Radio Button List CustomCSS v9.2.1 (ButtonBar)

  • October 22, 2021
  • 2 replies
  • 2486 views

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

Best answer by TravisPickett

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

2 replies

V
24-Ruby III
VladimirN24-Ruby III
24-Ruby III
October 22, 2021
  • 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

 

M
M4RC14-AlexandriteAuthor
14-Alexandrite
October 22, 2021

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

 

T
TravisPickett12-AmethystAnswer
12-Amethyst
October 25, 2021

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

    Terms & ConditionsAccessibility statement