Text of QInputs overlap with FlexCSS

[stefanvh]

I am not sure if I am doing something wrong or if this is a bug.
The problem is that q-input fields will overlap when they are used inside QCardMain.
Here is an example:
https://codepen.io/anon/pen/zMNjjG

It works fine for widths smaller than 992 pixels, but when the width increases the inputs are placed next to each other and the content overlaps. I have tried a lot of different things, but I can’t seem to get it to work so some help would be appreciated.

Thanks

[metalsadman]

can’t reproduce that one in your image, maybe add a class gutter-sm on the div containing your 2 q-input’s. https://codepen.io/anon/pen/yQMOOL

[s.molinari]

Also use col-6 on both divs, to get the inputs evenly spaced. https://codepen.io/anon/pen/BGWLRm

Scott

[stefanvh]

Thanks.
With col-6 it seems to work fine, but using three inputs next to each other with col-4 causes problems:
https://codepen.io/anon/pen/XyMzra

[s.molinari]

What browser are you using? I don’t see the same thing.

Also, is there a reason why you are limiting the card to 1/3 of the available screen width?

Scott

[stefanvh]

I am using Firefox. In Chrome it seems to work fine indeed. I forgot to check the behavior in different browsers than Firefox…

So it is a bug, but is it a bug with Quasar or Firefox?

The limiting width of a QCard seems to be default behaviour. The only way to get it to stretch across the whole width of the screen is by applying col-12, by default it seems to match col-4.

[s.molinari]

@stefanvh - I’m using FF (63.0.1) on Win 10 and don’t see the issue.

Scott

[stefanvh]

Hmm, weird. I first noticed it on a Windows 10 laptop with a low resolution. Then I could reproduce it on a Linux machine in the responsive design mode of Firefox.
I’ll try to figure out what the problem is, but there does not seem to be an obvious solution.

[metalsadman]

text do overlap when q-card is set to a column less than 4 in firefox. kinda same with this issue https://forum.quasar-framework.org/topic/2934/issue-with-input-before-after-icons-in-firefox.

[zeidanbm]

Trying to set the width on the input element, seems to fix the issue (like width: 100% instead of width: auto). This might have to do with input having default width by browsers which will differ from firefox to chrome to… This stackoverflow post might be of good use.