Invalid prop: custom validator check failed for prop "labelWidth"



  • @rstoenescu @s-molinari
    Even if I use it like described in docs, I still receive this Vue Warn that’s pretty noisy.

    Code sample:

    <q-field
      :helper="sliderHelper"
      :error="percentageExceed"
      :label="`Percentage: ${newPercentage}%`"
      :label-width="12" // <--------------------- HERE'S THE ISSUE!
      error-label="Attention: max total percentage must be 100%"
    >
      <q-slider v-model="newPercentage" :min="0" :max="100" label></q-slider>
    </q-field>
    

    Can this be fixed ASAP?
    Thanks, Niccolò



  • label-width should be 1<= val < 12. It’s not a width in pixels but a width in number of layout columns (12 based).
    As it’s a label for something it makes no sense to fill the whole space (12)



  • Why shouldn’t make sense to fill the whole space? I want it always full width like mobile style…



  • @n-taddei I tend to agree with you in principle, but I don’t understand your problem. Even without a width set, the label will be screenwide on mobile view. If you want it stacked in all screen sizes there’s float-label http://beta.quasar-framework.org/components/field.html#Stacked-Label-QInput

    if you still cannot achieve the desired output, please provide a screenshot/drawing to illustrate and we ll help you get there.


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.