Spread out the text in a checkbox option.

  • mdscj1
    Asked on September 25, 2016 at 11:47 PM

    Here's my jotform:  https://form.jotform.com/62318439859166

    My last field, "Accepting the terms...", as 2 checkboxes but the texts for those 2 options needs to be spread out all the way to the right in the blue form box.  How do I do that?

  • beril JotForm UI Developer
    Replied on September 26, 2016 at 3:11 AM

    To solve that issue could you please inject the CSS code below:

    .form-checkbox-item label {

        width : 500px !important;

    }

     

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • mdscj1
    Replied on September 26, 2016 at 12:08 PM

    Where do i put this code?

  • mdscj1
    Replied on September 26, 2016 at 12:18 PM

    Also, how do I make these 5 set of words in the options to be clickable to a link:

    User Terms and Conditions

    User Privacy Policy


    Affiliate Agreement

    Affiliate Policies and Procedures

    Affiliate Privacy Policy.

  • Charlie
    Replied on September 26, 2016 at 1:44 PM

    You can use this CSS code instead:

    #cid_19, #cid_19 > div, #cid_19 > div > span, #cid_19 > div > span > label {

        width: 100% !important;

        min-width: 100% !important;

    }

    Paste it under the CSS tab in your Form Designer Tool.

    Spread out the text in a checkbox option Screenshot 30

     

    For the follow up concern you have, you need to wrap the said text using the <a> to anchor a link. Here's a link to learn more about it: http://www.w3schools.com/tags/tag_a.asp

    In your case, you can do that directly in the "Options" list. Below is a screenshot of an example, in my case, in the "Options" list, this is how it is written:

    <a href="http://www.website.com" target="_blank">User Terms & Conditions</a>

    Spread out the text in a checkbox option Screenshot 41

     

    I hope that helps.

  • mdscj1
    Replied on September 27, 2016 at 12:50 AM

    Yes, that helps.  Next thing, how do I make the text of the clickable link more visible? Perhaps bold and red.  I need to try this and see if it's more visible.  If not, please also show me how to change the color.  Thank you.

  • Chriistian Jotform Support
    Replied on September 27, 2016 at 3:37 AM

    To change the link's color to red and make it bold, simply inject the custom CSS code below to your form. You can change the color to something else by replacing the highlighted text.

    a {

        color: red;

        font-weight: bold;

    }

    Here's how it should look after:

    Spread out the text in a checkbox option Screenshot 20

    Regards.