Vuetify: [Bug Report] v-text-field required with counter errors

Created on 24 Feb 2018 · 5Comments · Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.0.3
Vue: 2.5.13
Browsers: Chrome 64.0.3282.167
OS: Windows 10

Steps to reproduce

add required
add counter

Expected Behavior

align errors:
required label at right
counter at left

Actual Behavior

align errors not right
required: error label appear at center and take the whole width
counter: disappear because required error take all the width

Reproduction Link

https://codepen.io/johnjleider/pen/bgJOrX
https://codepen.io/anon/pen/RQYMaX

bug

Source

AbdulkaderMakki

Most helpful comment

The issue you are describing is not based on the use of required or counter. If you look at your codepen you have specified a text-xs-center on the v-flex containing the v-text-fields

chewy94 on 25 Feb 2018

❤1 👍1

All 5 comments

I fixed this by add

{
  flex: 1 0 80%;
  text-align: left;
}

to .input-group__error class

AbdulkaderMakki on 24 Feb 2018

The issue you are describing is not based on the use of required or counter. If you look at your codepen you have specified a text-xs-center on the v-flex containing the v-text-fields

chewy94 on 25 Feb 2018

❤1 👍1

@chewy94 Thanks
you're right for required error text
but is this the expected behavior for both counter and required?
I mean the counter disappear once required error triggered

AbdulkaderMakki on 26 Feb 2018

Caused by #3077

KaelWD on 27 Feb 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord