[SOLVED] q-input using with q-field = double underlines

DrCoffee

Using q-input in q-field like the example but without ‘dark’ generates double underlines. Its only when using ‘helper’ or ‘:count’. Is it a error in my environment, or wanted?
Is there a option that i can use only q-input like this?
Label: ______________
thanks a lot for help … and please understand, i am new to javascript , vue and quasar …

benoitranque

This may be an error in your environment, and is not expected behavior. Could you post the code that generated this error? Thanks!

DrCoffee

The whole project ist very large, but the behavior is reproduceable also in a new project
It’s the example and only if ‘helper’ or ‘:count’ is used … (the dark theme hides it)

<template>
  <q-field label="Some Label" helper="Some helper" error-label="Some error" labelWidth=1 :count="10" :error="error"> 
    <q-input v-model="text" color="primary"/>
  </q-field>
</template>
<script>
  import 'quasar-extras/fontawesome'
  import {QField, QInput} from 'quasar'
  export default {
    components: {
      QField, QInput
    },
    data: function () {
      return {
      }
    }
  }
</script>
<style lang="stylus">
</style>

benoitranque

Please wrap code with ``` to format as code.

I am unable to reproduce your issue, using your code.

What browser are you using?
Are you using the default mat theme?

I was able to reproduce your error by using the following incorrect code:

    <q-field label="Some label" helper=" helper"></q-field>
    <q-input v-model="text"/>

As you can see the q-input is not inside de q-field. This may look right without the helper but you do get those double lines with it.

DrCoffee

Browser are chrome Version 62.0.3202.89 (64-Bit) and Firefox 56.0.2 (64-Bit)
theme: default mat
the q-input is between the q-field-tags as you can see

<q-field label="Some Label" helper="Some helper" error-label="Some error" labelWidth="3" :count="10" :error="error"> 
   <q-input v-model="text" color="primary"></q-input>
</q-field>

I think ‘helper’ and ‘count’ generates this line

CSS:  .q-field-no-input{  border-top: 1px solid rgba(0,0,0,0.12); }

benoitranque

I’m sorry but using you code I cannot reproduce your error. Could you post the whole component?

Note: Use single backtick for small commands, triple backticks for code blocks.

like this


and this

DrCoffee

The component code is that from the post at Nov 11. The whole project 37 Files (a little bit to much, i think).
I’ve tried out the same / above code in a complete new created (14.7) Project - the component itself works as expected
It seems that it has also nothing to do with sub-components (copied to the main component - failed).
Perhaps it’s a broken update problem. Update was made by ‘npm update quasar-framework’ and it shows 14.7.
What the appropriate way to update, i’ve read different answers in the forum, but nothing ‘qualified’ in the docu. The project origin was 14a.
Is there a way to check all (which) components are up to date?

DrCoffee

I’ve found the error!
The error was caused by npm +Windows 10, i think.
The rename of the temporary package.json didnot work and Files in Subfolder for ‘node_modules’ had become read-only.
Some Component (Quasar) were updated, others not (vue).
No Errors or Warnings.
After resetting attributes and updating npm + vue + quasar, its working
@benoitranque Thanks a lot, for your help.

benoitranque

Great! Marked as solved.

steve

I had the exact issue on 0.17.19
I just re ran the following and it cleared up

quasar clean
npm install
quasar dev

No More Posting New Topics!

[SOLVED] q-input using with q-field = double underlines