Short terms Widget help

  • SunbridgeInstitute
    Asked on January 7, 2016 at 11:19 AM

    Hi there! Is it possible to eliminate the box of text on the Short Terms widget? If not, is there any other way that I can get a checkbox with smaller type for a very short set of terms?

    You can see my dilemma if you scroll all the way to the bottom of my form. I have 2 options there where it says "by checking this box, I understand..." One of them has huge type, and the other one is fine, but it has a big empty box underneath.

    Thank you!

  • Charlie
    Replied on January 7, 2016 at 3:38 PM

    I checked your form, it seems like you added the content of the terms in the actual label. The box for the Short Terms widget is to display the content of the terms in a scrollable text box (non-editable). You can see how this widget works here: http://widgets.jotform.com/widget/short_scrollable_terms.

    Short terms Widget help Image 1 Screenshot 30

     

    Now the 1st check box which is "Cancellation Policy" field is using a default check box, however, the form has a general design for the check box, it seems like you have used a theme in our designer, this is to blend the whole design.

    If you wish to use a default check box similar to the widget, you can use this custom CSS code:

    /** hide the circle box*/

    #label_input_132_0::before {

        display: none !important;

    }

     

    /** hide the circle with check on it */

    #label_input_132_0::after {

        display: none !important;

    }

     

    /** position the label aligned with the check box*/

    #label_input_132_0 {

        position: relative !important;

        top: -25px !important;

    }

     

    /** display the default check box and design it*/

    input#input_132_0 {

        display: inline-block !important;

        vertical-align: center !important;

        margin-top: 0px !important;

        width: 20px !important;

        height: 30px !important;

    }

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

    Short terms Widget help Image 2 Screenshot 41

     

    You can check how it looks like here: https://www.jotform.com/60066443534957 

    Do let us know if that will help.

  • SunbridgeInstitute
    Replied on January 8, 2016 at 8:40 AM

    Thank you for your answer. My overall concern is not so much about the shape of the checkbox, but the size of the type/text. The reason I put the terms in the label box was because the type size and color works well. The other option would be to put it all in the box, but then I would want the type color to be changed, and also the size of the box to be shortened considerably. Can you help me with these things? Thank you!

  • Charlie
    Replied on January 8, 2016 at 10:26 AM

    Apologies for the confusion. 

    You can use this custom CSS code in your Short Scrollable widget:

    /** label beside the check box*/

    label {

        color: #fcfcfc !important;

        font-weight: normal !important;

        font-size: 0.95em !importnat;

        font-family: "Arial", sans-serif !important;

    }

    /** Content of the widget */

    #scrollContent  {

       color: white !important;

    }

    Short terms Widget help Image 1 Screenshot 30

    To adjust the scrollable box to where the content will be shown, just click the widget and set the "Height" attribute to a lower value.

    Short terms Widget help Image 2 Screenshot 41

     

    Here's the cloned form with the changes I made above: https://www.jotform.com/60073605975964.

    I tried to match the styling and color of the other labels in your other fields. If there are changes you want to apply, we can adjust the CSS code for you or you can easily update the code I provided.