I'm having some trouble getting a radio button with Font Awesome to work properly within an HTML table. Outside of the table, it functions as expected, but inside the table, it only seems to hide/show between the two states without displaying the checkmark from the CSS styling. I suspect that there might be an issue with how I'm referencing the CSS file. My project utilizes AngularJS and passes in a boolean attribute called vehicle.isMasterLink.
I'm unsure if using two toggles is the correct approach for this situation.
Below is the JavaScript code within the controller:
$scope.toggleRadioButton = function(vehicle) {
if (!vehicle.isMasterLink) {
vehicle.isMasterLink = true;
}
else {
vehicle.isMasterLink = false;
}
};
Here is the HTML code outside of the table where the radio button works:
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio">
<label for="radio-1" class="radio-custom-label"></label>
</div>
And here is how I am attempting to implement it within the HTML table at the bottom:
<table style="width: 100%" class="" id="toSourceTable" style="height:600px;">
...
(full content copied from original text)
...
</table>
In addition, here is the CSS code that works for the radio buttons when placed outside of the table:
(full content copied from original text)
My data is being populated into the table using AngularJS. Can anyone provide insight on how to ensure the radio button displays the checkmark as intended with the CSS styling? The functionality seems correct, but the visual indicator of the checkmark is missing. What steps can I take to resolve this issue?