Quasar: [Request] auto-grow for q-input horizontally

[mesqueeb]

Currently q-input has auto-grow for text-areas vertically.

I require an option that my (non-textarea) inputs autogrow horizontally.

[mesqueeb]

This is high on my priority list! ♡

[rstoenescu]

It already grows to the available horizontal space... Did I miss anything? jsFiddle pls.

[mesqueeb]

@rstoenescu
This is what I meant:

The ability to set a min-width and make the input auto grow based on the content.

I use it all the time in a lot of places throughout my apps and websites.
I usually use this small package:
https://github.com/yuanqing/autosize-input

Then I wrapped that in a directive:

  import autosizeInput from 'autosize-input'

  Vue.directive('autowidth', {
    inserted(el, binding) {
      Vue.nextTick(function () {
        autosizeInput(el)
      })
    }
  })
// and use it like v-autowidth on an <input>

However, it doesn't work with inputs wrapped in because the directive is not applied on the correct element.

Could I implement this functionality and make a PR for you? I would use that package as dependency, unless you want me to build it from scratch, I can give it a shot, make a PR.
What do you think?

[mesqueeb]

@rstoenescu Can you re-open this issue?

This feature request of mine still stands, as it's very important for my app! : D

[mesqueeb]

I still require the autogrow feature for text input fields with the ability to grow horizontal.
The current "autogrow" in V1 gives me new lines.

I require the actual input to grow horizonally:

[mesqueeb]

@rstoenescu
Since this is still very high on my wish list and not yet implemented, can you re-open this Request, or should I copy the contents into a new issue?

I need vertical autogrow with both QInput as QSelect.

[leonardoalvesprodepa]

<q-input :input-style="{width:${text.length/2}em, maxWidth: '300px', minWidth: '50px'}" outlined v-model="text" />