Don't want q-input to expand with text.

[cynderkromi]

On my little online form, when someone types information into the q-input, and it’s long, the input (or maybe it’s the flexbox, I can’t tell) expands so that it pushes the page off the right size of the browser window and it can no longer be easily seen.

I am not sure if this is happening because of the input or the flexbox.

How do I force the q-input to not expand? I want the input to remain a static width.

this is my q-input inside the flexbox div.
Thanks!

    <div class="col-4 q-pa-md">
    <q-input
      filled
      v-model="dogAkcNum"
      @change="resetToggle"
      bg-color="orange-2"
      label="AKC Number"
      hint="Dog's AKC Registration Number"        
      lazy-rules
      :rules="[ val => val && val.length > 0 || 'AKC Registration Number is Required']"
        /> 
      </div>

[dobbel]

@cynderkromi

Does not happen in any of the default Quasar input examples.

Could be custom css or…hard to tell from just the code snippet your posted. Try to disable all your custom css first.

Please create a codepen.io so we can provide better support.

[cynderkromi]

Yeah, I know it doesn’t expand on the quasar pages for q-input. That’s why I’m wondering if it’s the flexbox expanding.

I don’t really want to make a codepen with my whole application.

https://bristlenosedog.com/enter/#/

[dobbel]

@cynderkromi

I don’t really want to make a codepen with my whole application.

Understandable, the trick is to create a minimal effort and size codepen that will still reproduce your problem. For example: a form with 1 input.

https://bristlenosedog.com/enter/#/

Is the issue on this site? If so where?

[cynderkromi]

It happens with the Dog Information fields. If you type in a really long string, the page expands.

It’s weird that the Owner fields don’t cause the same thing, as all the fields are defined the same way.

[dobbel]

@cynderkromi

It happens with the Dog Information fields. If you type in a really long string, the page expands.

It’s not because of the q-input directly but because the table under the label: ‘Current Entry - This has not been saved unless it shows in the “Saved Entries” box.’

This table grows in width when you type something in the dog’s info input. Because the table is in the same parent container ( I presume) the input’s will stretch along with the table.

[cynderkromi]

I fixed it, I had too many flexbox rows.