How do I make fill in the blank options grow in relative/responsive size based on the answer?

  • dstuartjohnston
    Asked on August 20, 2020 at 8:41 AM

    Hi there I'd like to know if it's possible to make fill in the blank answers grow with the length of the answer itself rather than cutting off the answer when it gets too big.

    If that is not possible I would like to at least increase the size of the fill in the blank boxes on this form please so that they are big enough to fit the answers.

     

    It's on page 2


    Many thanks

  • ReallyRozie
    Replied on August 20, 2020 at 9:26 AM

    Hi dstuartjohnston,

    you can toggle the Limit Entry in the Fill in the Blanks Properties. It looks like this.

    1597929770Fillintheblanks Screenshot 10

    Limit Entry OFF makes the field grow with the characters, with the option toggled to on you can set a limit of characters to the field. 
    You can set these for each Blank you have to fill in.

    Hope this helps

  • dstuartjohnston
    Replied on August 20, 2020 at 11:12 AM

    Hi Rosie, many thanks for your attempt, unfortunately the 'limit entry' was already off so the words simply disappear once they get beyond the current width constraints. Many thanks for your try though!

  • Ashwin JotForm Support
    Replied on August 20, 2020 at 11:19 AM

    It seems you are looking for an option for textarea width to expand dynamically as the form user keeps typing in the "Fill in the Blanks" field. 

    Unfortunately it is currently not possible to dynamically increase the width of the "Fill in the Blanks" field. Please inject the following custom CSS code in form increase the textbox width:

    /* If you want to increase the width of all textbox of fill in the blanks field*/

    span.FITB-inptCont[data-type=textbox] input {

        min-width: 300px !important;

    }


    /*To increase the width of first textbox*/

    #\31 597924200037-shorttext {

        width: 300px !important;

    }


    /*To increase the width of second textbox*/

    #\31 597924200038-shorttext{

        width: 300px !important;

    }


    /*To increase the width of third textbox*/

    #\31 597924303542-shorttext{

        width: 300px !important;

    }

    The following guide should help you how to inject custom CSS code in your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    Hope this helps.

    Do get back to us if you have any questions.