Adding space between radio buttons

Question

is there any way we can add space between the choice fields (Radio Buttons)?

For instance if I want to make space between Youth and Adult what would be the steps?

Answer 1

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$(function(){
  $('[title="Youth"]').closest("tr").css("display","block").css("margin-top","-15px")
  $('[title="Adult"]').closest("tr").css("display","block").css("margin-top","15px")
  
})
</script>

Test result:

Answer 2

To add spacing between all radio buttons of all choice fields, use below reusable function:

<script type="text/javascript">

    function addSpaceBetweenRadio(){
        var tableCollection = document.querySelectorAll("table[id$='_ChoiceRadioTable']");

        for(var i = 0; i < tableCollection.length; i++) {
            var tBody = tableCollection[i].children;
            var trCollection = tBody[0].children;
            
            for(var index = 0; index < trCollection.length; index++) {
                trCollection[index].style.display = "block";
                trCollection[index].style.marginBottom = "10px";
            }
        }
    }

    _spBodyOnLoadFunctionNames.push("addSpaceBetweenRadio");

</script>

Use below steps to add this code on list form page:

1. Go to your list form. (Example new form URL: <siteUrl>/Lists/<listName>/NewForm.aspx)
2. Edit page
3. Add Script Editor/Content Editor web part
4. Add above code in web part
5. Save/Publish list form page

Sample Output: Showing spacing between all radio buttons of all choice fields

Related links: Run JavaScript after page loads

---

No need to add reference to any external library like jQuery. Above code uses plain JavaScript.