Text area with a maximum height of 100%

danielo515

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

benoitranque

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

danielo515

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.

danielo515

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:

for performance reasons I am using codemirror instead of quasar text area input
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

benoitranque

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>

gvorster

@benoitranque said in Text area with a maximum height of 100%:

You need to look into flexbox

I tried that code:

<template>
  <q-page padding>

    <div class="column full-height">
      <div class="col-auto">
        Takes up the minimum vertical height needed
      </div>
      <div class="col">
        <div v-for='(item,idx) in 100' :key='idx'>{{item}}</div>
      </div>
    </div>

  </q-page>
</template>

This is what I get:

alt text

How can I make the second column scroll and keep the first column visible?

No More Posting New Topics!

Text area with a maximum height of 100%