How to get rid of scrollbar in QInput when using autogrow

[eoinom]

I am using a q-input with autogrow however a scrollbar is showing for some reason. Any ideas why this might be and how to get rid of it?

<template>
  <div class="row q-mb-sm">        
    <q-input 
      autofocus
      outlined 
      clearable
      autogrow
      :value="name" 
      ref="name" 
      class="col"
      label="Account name"
      @input="$emit('update:name', $event)"
      :rules="[val => !!val || 'Field is required']" 
    />
  </div>    
</template>

<script>
  export default {
      props: ['name']
  }
</script>

[rjp]

same here…

[metalsadman]

@rjp you can with css https://stackoverflow.com/questions/19424887/remove-scrollbars-from-textarea, tho i tried the code above https://codepen.io/metalsadman/pen/QWLzJzV?editors=1010, and see no scrollbars on chrome/firefox.

[rjp]

@metalsadman Yeah I tried the css no luck. It is very strange. I have a few panels with autogrow fields working as designed - just in this one even if I copy a working one to this panel it shows the scroll.

Nothing in my <style> tags - just template and script.

The problem field is in a list, in an expansion panel…
The working autogrow fields are in a list, in a stepper

I’ve tried everything - even when I replace autogrow with type="textarea" the textarea starts out with scroll bars without any text input.

Anyway, just going to leave plain text input now - come back later when I have time to stare at it some more. delivery due now…

Thanks for helping though

[metalsadman]

@rjp it’s related to this then https://github.com/quasarframework/quasar/issues/3953.