0

I have multiple radio buttons(choice column) on new form of a SharePoint list.

Each of my choice column contains 10 values ranging from 1 to 10(10 radio buttons) and they are displayed vertically.

What I want to do is to display all radio button horizontally in one line.

Any suggestions on how to do it?

Thanks

2

1 Answer 1

5

Try with margin-left CSS。

Demo:

enter image description here

<style type="text/css">
        input[type="radio"] {
            margin-left: 10px;
        }
    </style>

<input type="radio" checked="checked" name="edit" value="A">A
    <input type="radio" name="edit" value="B">B
    <input type="radio" name="edit" value="C">C

Update:

Try this JS code:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        $(function () {
            var reBuildTR = $('<tr></tr>').append("<th></th>");
            //update RadioField as your field name
            $('table[id^="RadioField"]').find('td').each(function () {
                $(reBuildTR).append($(this));
            })
            $('table[id^="RadioField"]').html("").append(reBuildTR);
        })
    </script>

enter image description here

8
  • I want to make changes in the default share point new form. I do not have a custom form. Oct 30, 2018 at 5:59
  • i tried to use SPServices for the same but it does not work,i don't know why Oct 30, 2018 at 6:15
  • Try the update.
    – Lee
    Oct 30, 2018 at 6:32
  • do i have to change any id in the above code? Oct 30, 2018 at 6:42
  • Just add the display name of your choice field instead of "RadioField" at the line $('table[id^="RadioField"]') Oct 30, 2018 at 6:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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