none
Add indent for choice column(Check Boxes) in SharePoint list. RRS feed

  • Question

  • Hi,

    I would like to add indent for choice column(Check Boxes) in SharePoint list.

    When we create choice column in sharepoint it display as column options as follows
    choice a
    choice b
    choice c
    choice d
    choice e
    choice f
    choice g
    choice h   

    but I want to format the sharepoint list form so that choice column should display as follows . Please give me idea to achieve this.   

    choice a
            choice b
            choice c
            choice d
    choice e
           choice f
           choice g
           choice h     

    Thank you.

    OK29

    Saturday, August 24, 2019 1:05 AM

Answers

  • Hi OK29,

    You can add indent style by Jquery, here is the Jquery code for your reference, add padding-left to the choice needed:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("span[title='choice b']").parent("td").css("padding-left","10px");
    $("span[title='choice c']").parent("td").css("padding-left","10px");
    $("span[title='choice d']").parent("td").css("padding-left","10px");
    $("span[title='choice f']").parent("td").css("padding-left","10px");
    $("span[title='choice g']").parent("td").css("padding-left","10px");
    $("span[title='choice h']").parent("td").css("padding-left","10px");
    });
    </script>


    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Monday, August 26, 2019 12:04 PM

All replies

  • I don't think that can be possible if it a Single field values instead you could create multiple field and in the JavaScript you could say Choice Column value is Choice A then it should display Choice B, C & D and if someone select Choice E then it should display Choice F, G & H. Also you could hide the other column if you select Choice A then it will hide Choice F, G & H. you could use something like below JavaScript.

    <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function(){
    //Show/hide columns based on Drop Down Selection
    $("select[title='City']").change(function() {
    if ($("select[title='City']").val() != "other")
    {
    $('nobr:contains("OtherCity")').closest('tr').hide();
    }
    else
    {
    $('nobr:contains("OtherCity")').closest('tr').show();
    }
    });
    });
    </script>
    Thanks & Regards,

     

    sharath aluri

    Monday, August 26, 2019 12:49 AM
  • Hi OK29,

    You can add indent style by Jquery, here is the Jquery code for your reference, add padding-left to the choice needed:

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("span[title='choice b']").parent("td").css("padding-left","10px");
    $("span[title='choice c']").parent("td").css("padding-left","10px");
    $("span[title='choice d']").parent("td").css("padding-left","10px");
    $("span[title='choice f']").parent("td").css("padding-left","10px");
    $("span[title='choice g']").parent("td").css("padding-left","10px");
    $("span[title='choice h']").parent("td").css("padding-left","10px");
    });
    </script>


    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Monday, August 26, 2019 12:04 PM
  • Hi Jerry,

    Thank you for your advise. I need one more favor from you.

    I am trying to display check boxes when top check box is checked with following script. This script is working fine in one scenario but not in another scenario. Please look into it and advise.

    Working for "All"

    if (event.target.nextElementSibling.innerHTML == "All")
    {   

         $("span[title='choice A']").show();
         $("span[title='choice B']").show();
         $("span[title='choice C']").show();
         $("span[title='choice D']").show();
         $("span[title='choice A']").show();

    }

    Not Working for "All Types (ABC&DEF)"

    if (event.target.nextElementSibling.innerHTML == "All Types (ABC&DEF)")
    {   

         $("span[title='choice A']").show();
         $("span[title='choice B']").show();
         $("span[title='choice C']").show();
         $("span[title='choice D']").show();
         $("span[title='choice A']").show();

    }

    Any help would be greatly appreciated.

    Thank you.


    OK29

    Monday, September 2, 2019 1:06 PM