0

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?

enter image description here

1
  • Is this classic experience list form? You want to do this for particular radio field or all radio fields on page? Mar 30 at 12:30
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:

enter image description here

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

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

enter image description here

Related links: Run JavaScript after page loads


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.