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