How do I increase text area width?

  • motoxplorers
    Asked on February 25, 2015 at 1:56 PM

    Hi guys,

     

    I need to adjust the size of 2 text areas in my form http://form.jotformeu.com/form/50542643100340

    Basically I need to increase them to width around 250 or 300px so they can fill one line of my form beautifully ;)

    Can you help me please.

     

    Thanks

  • Sean
    Replied on February 25, 2015 at 4:09 PM

    Please inject this code into your form:

    .form-textarea {
    width: 250px;
    }

    You can adjust the width by increasing or decreasing 250px.

    You can reference this guide for the steps to inject the CSS code:
    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 


    Thanks

  • motoxplorers
    Replied on February 26, 2015 at 3:47 PM

    Hi Sean

    thank you for your help, i follow your instructions but I'm a very limited code injector and it did not worked. ;)

    Can you please clone my form and try to make the Special Needs textarea the same size as the Sub Label and the Comments text area to hav the same width as the to above textboxes together (Passenger and nationality textboxes)? 

    Thanks

  • Ben
    Replied on February 26, 2015 at 5:40 PM

    I would be glad to make the change, but I can not find the Passenger and nationality textboxes to base the width to.

    However, if you use this CSS code:

    li[data-type="control_textarea"] textarea {
        min-width: 200px;
    }

    You can change the width of the both textarea without any difficulties by adjusting the width in the CSS code.

    To add it, please follow the steps here, but add the code at the bottom / end of all other codes and it should work properly for you.

  • motoxplorers
    Replied on February 27, 2015 at 6:03 AM

    thanks Ben, that worked to one of the textarea boxes but I do not know how to adjust the width of the second one...

    As you can see in the screenshot I need the text areas with the same size as their own sub labels, so they can be aligned with the above boxes. 

    I just write the xvxvxvxvxvxvxvxv... sub label in Comments textarea so you can se the width I need on that box.

    I know it is a small detail but it's the difference between Ok and perfect ;) 

    Can you help me?

    How do I increase text area width? Image 1 Screenshot 20

    You can see it on this form http://form.jotformeu.com/form/50573033565352 you can clone and adjust

     

    Thanks mates

  • Ben
    Replied on February 27, 2015 at 9:22 AM

    I know what you mean and we would be glad to help you set it to perfect :)

    There was no sub-label yesterday for the second one, but I see one for both now and this is the code to get them to that size:

    #id_90 textarea {
        min-width: 183px;
        resize: vertical;
    }
    #id_91 textarea {
        min-width: 330px;
        resize: vertical;
    }

    The first one is for the left textarea and the one under it (#id91) is for the right one.

    I also included the code to show that it can only be resized by the height, not by the width ;)

    Do let us know how it goes and remember to copy the code at the bottom of the Form Styles area.