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?

Is this classic experience list form? You want to do this for particular radio field or all radio fields on page? — Ganesh Sanap - MVP, Mar 30 '21 at 12:30

score 0 · Accepted Answer · answered Mar 30 '21 at 06:06

0

<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:

answered Mar 30 '21 at 06:06

Amos

1,981
1
6
12

Hey Amos, you are great man. Thanks for your help – Harris Mar 31 '21 at 01:05
If my reply helps you, you could accept it as the answer. Thank you :). – Amos Mar 31 '21 at 01:26

score 0 · Answer 2 · answered Mar 30 '21 at 13:09

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(&quot;table[id$='_ChoiceRadioTable']&quot;);

    for(var i = 0; i &lt; tableCollection.length; i++) {
        var tBody = tableCollection[i].children;
        var trCollection = tBody[0].children;

        for(var index = 0; index &lt; trCollection.length; index++) {
            trCollection[index].style.display = &quot;block&quot;;
            trCollection[index].style.marginBottom = &quot;10px&quot;;
        }
    }
}

_spBodyOnLoadFunctionNames.push(&quot;addSpaceBetweenRadio&quot;);


</script>

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

Go to your list form. (Example new form URL: <siteUrl>/Lists/<listName>/NewForm.aspx)
Edit page
Add Script Editor/Content Editor web part
Add above code in web part
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.

Adding space between radio buttons

2 Answers2