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.
    Thanks



  • 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:
    https://github.com/quasarframework/quasar/blob/ef358ece7dbb87ace6df26dc5d81fd6b704bcb68/src/components/layout/QLayout.vue



  • 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>
      <div class="col">
        takes up the rest of the space
      </div>
    </div>
    

Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.