q-input type="textarea" full-height



  • how to set q-input type=“textarea” 100% height of parent? I tried this:

    <div id=“q-app”>
    <div class=“q-pa-md fit”>
    <q-input
    v-model=“text”
    outlined
    type=“textarea”
    :input-style="{resize: ‘none’, height: ‘100%’}"
    class=“full-height”
    ></q-input>
    </div>
    </div>

    #q-app{
    height:250px;
    }



  • You could add rows="1000" (or another large number) to the q-input.
    It is not exactly 100%, but it’s 100% with a maximum number of rows. I think that’s ok because a text-area with this many lines doesn’t make much sense anyways.

    Seems a bit like a hack, though… so I don’t know if some browsers maybe handle this differently. Maybe it would be wise to set overflow: hidden on the container as well - just to be safe.


Log in to reply