Text area with a maximum height of 100%

  • Hello,

    I want to create a text area that fills it’s parent. With the width I have no problem, it is full width by default, but I can’t say the same thing for height.

    Any guidance on this will be very welcome.

  • Have you tried <q-input type="textarea" class="full-height" /> ?

  • Hello @benoitranque
    That class just adds height: 100% !important, which is not what I wanted.
    In fact, I want to change my question to not limit it to a text area but to any component. What I want is a maximum and minimum height of 100%, so when the height is over 100% I want it to scroll, without page scroll. Hope I’m being clear.

    I saw that the page layout makes exactly what I want, with a min-height. It uses min-height: calc( 100vh - 50px) where the 50px is the height of the toolbar, but I’m not sure how to get such value.

  • Finally I found how to do it!

    I’m just using a computed style property, that calcs the right style size of the element. To be honest, this solution is a bit different to what I have originally asked for two reasons:

    1. for performance reasons I am using codemirror instead of quasar text area input
    2. Instead of setting the text area to 100% I just have to set it’s container to a proper size, because codemirror is nothing but a div.

    Here is the code

      data () {
        return {
          currentTab: '',
          header: {h: '0px', w: 0}
      mounted () {
        this.header.h = style(this.$refs.layout.$refs.header, 'height')
      computed: {
        computedMainStyle() {
          return { height: `calc( 100vh - ${this.header.h} )` };

    The code is inspired on the layout code from quasar:

  • You need to look into flexbox

    this from memory:

    <div class="column full-height">
      <div class="col-auto">
        Takes up the minimum vertical height needed
      <div class="col">
        takes up the rest of the space