search

FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
206 stars 49 forks source link

vuetify text field hint not working. Is this a vuetify bug or node-red issue? #405

Open colin-grierson opened 11 months ago

colin-grierson commented 11 months ago

vuetify text-field not working when a 'hint' is defined: Hint appears at the right instead of underneath & widget becomes unusable

I used the vuetify text-field to create a control for resetting an error condition:: image This includes a 'hint', which in the examples on the vuetify web site, appears under the text field (see https://vuetifyjs.com/en/components/text-fields under 'hints and messages) However on my dashboard the hint appears to the right of the text field, compressing the text field and making it unusable image My control is a bit complex, but the same happens with the most basic: Here is the code from the template "<" v-text-field label="Password" type="input" hint="Enter your password to access this website"></v-text-field ">" Here is the result image Focus on the text field and we get image

Inspecting the html For my dashboard the text field is divided in four, with the hint text at the bottom right image

For the vuetify example I see the text-field is divided in two with the hint at the bottom image

For now I remove the hint. Not urgent

joepavitt commented 11 months ago

Thanks @colin-grierson - this is likely where I've injected some custom CSS to the nrdb-ui-widget level for the layout management, which then affects how the underlying text-field renders. Will see what can be done.