How to make text area full width with word count limiter?

  • unruhfurniture
    Asked on November 27, 2017 at 9:08 AM

    I noticed that my text area fields used to align with the rest of my form nicely, but when I added a max limit on words they re-sized smaller. I would like them to be the same width as the single line fields (see attached).

    Thanks so much!
    Sam

    P.S. Here is a copy of my CSS for the form:


    .form-label.form-label-auto {

        display : block;

        float : none;

        text-align : left;

        width : 100%;

    }


    .form-required {

        color : #ffffff;

    }


    .form-line-error .form-error-message {

        background-color : #1D3648;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #1D3648;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    body, .form-all {

        background : none !important;

    }


    .form-all {

        margin-left : 100 !important;

    }


    .jotform-form {

        padding : 0!important;

    }


    .form-line-error .form-error-message {

        background-color : none;

    }


    .form-line-error .form-error-message .form-error-arrow {

        border-bottom-color : #ffffff;

    }


    .form-line-error {

        background-color : #ffffff;

    }


    .supernova .form-all {

        border : 0 !important;

        box-shadow : none !important;

        -moz-box-shadow : none !important;

        -webkit-box-shadow : none !important;

    }


    .form-line.form-line-active {

        background-color : #ffffff;

    }


    .form-buttons-wrapper {


    }


    .form-pagebreak {

        border-top : none;

    }


    .form-pagebreak {

        border-top : none;

        background : none;

    }


    #form-pagebreak-back_16 {

        display : none;

    }


    input#input_18_1000,  input#input_18_1000 + label {

        display : none;

    }


    .form-submit-button:hover {

        background : #E5C181 !important;

    }


    .form-submit-button:active {

        -moz-box-shadow : 0 0px #000 inset;

        -webkit-box-shadow : 0 0px #000 inset;

        box-shadow : 0 0px #000 inset;

    }


    Jotform Thread 1307683 Screenshot
  • Richie JotForm Support
    Replied on November 27, 2017 at 9:51 AM

    Hi,

    You wanted to increase the width of your textarea to align with your text entry above?

    How to make text area full width with word count limiter? Image 1 Screenshot 20

    If so, you can use this custom css:


    textarea#input_7.form-textarea{
      width: 728px;
    }
    textarea#input_16.form-textarea{
      width: 728px;
    }
    textarea#input_17.form-textarea{
      width: 728px;
    }
    textarea#input_26.form-textarea{
      width: 728px;
    }


    Here is a guide in injecting custom css:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes


    Best Regards.