After analyzing your JSON, I might try the following:
- Enhanced CSS: Update the CSS to ensure it has higher specificity and uses the
!important flag to override any conflicting styles. This should help the font styles apply correctly to the radio buttons.
Here’s an updated CSS snippet:
"css": "/* Enhanced CSS for SingleChoice component */\n\
.plumsail-form .plumsail-radio-buttons label {\n\
font-style: normal !important; /* Apply normal style */\n\
font-weight: 600 !important; /* Semibold corresponds to 600 */\n\
color: black !important; /* Set color explicitly */\n\
}\n"
Refined JavaScript: The JavaScript below includes a slight delay to ensure it runs after all elements are fully rendered. This may help apply the styles correctly.
"js": "fd.rendered(function() {\n\
setTimeout(function() {\n\
document.querySelectorAll('.plumsail-radio-buttons label').forEach(function(element) {\n\
element.style.fontStyle = 'normal';\n\
element.style.fontWeight = '600'; // Semibold\n\
element.style.color = 'black'; // Set color explicitly\n\
});\n\
}, 500); // Slight delay to ensure elements are fully rendered\n\
});\n"
// If SharePoint Forms
"js": fd.spRendered(function() {
setTimeout(function() {
document.querySelectorAll('.plumsail-radio-buttons label').forEach(function(element) {
element.style.fontStyle = 'normal';
element.style.fontWeight = '600'; // Semibold
element.style.color = 'black'; // Set color explicitly
});
}, 500); // Slight delay to ensure elements are fully rendered
});
Additional Option: If using the Type field with custom colors, adjust its configuration
{
"type": "SingleChoice",
"model": {
"_internalName": "Type",
"title": {"text": "Type of Time", "visible": true},
"orientation": "Vertical",
"required": true,
"font": {"style": "Normal", "weight": "Semibold", "size": 16, "unit": "Pixel"},
"cFont": {"style": "Normal", "weight": "Normal", "size": 12, "unit": "Pixel"},
"cColumns": 1,
"options": [
{"value": "Vacation", "backgroundColor": "#37a448", "textColor": "#ffffff"},
{"value": "Sick", "backgroundColor": "#ce310e", "textColor": "#ffffff"},
{"value": "Birthday", "backgroundColor": "#0eaece", "textColor": "#ffffff"},
{"value": "Work from Home", "backgroundColor": "#7b0ece", "textColor": "#ffffff"},
{"value": "Discretionary", "backgroundColor": "#6e6e6e", "textColor": "#ffffff"},
{"value": "Other", "backgroundColor": null, "textColor": null}
],
"allowUserValue": false,
"defaultValue": ["Vacation"]
}
}
These snippets should be directly inserted into your JSON configuration file. The css property will handle the styling of the radio button labels, and the js property will ensure the styles are applied after the form is fully rendered. If the issue persists, try temporarily disabling other custom styles or scripts to rule out any conflicts. Sorry in advance if this does not work.
