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

  • 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 …

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

  • 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)

      <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"/>
      import 'quasar-extras/fontawesome'
      import {QField, QInput} from 'quasar'
      export default {
        components: {
          QField, QInput
        data: function () {
          return {
    <style lang="stylus">

  • 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.

  • 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>

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

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

  • 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

  • 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?

  • 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.

  • Great! Marked as solved.

  • 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

Log in to reply