Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug Report] VInput: outlined fieldset legend clipped when dynamically shown

See original GitHub issue

Versions and Environment

Vuetify: 2.0.0-beta.1 Vue: 2.6.10 Browsers: Chrome 74.0.3729.131 OS: Linux x86_64

Steps to reproduce

Create an outlined VTextField, VTextarea or VSelect with a default value so that the fieldset legend is initially set/shown at the top.
Place the previously created element in a wrapper with display: none.
Dynamically (through JavaScript) change the wrapper style to display: block.

Expected Behavior

The fieldset legend will have a width in pixels corresponding to the fieldset legend text width. This makes the outlined border not “strike” the fieldset legend text.

Actual Behavior

The fieldset legend will have a width of 6px regardless after the wrapper style is dynamically changed, thus making it appear “clipped” with the outlined border.

Reproduction Link

https://codepen.io/anon/pen/mZyEmE

Issue Analytics

State:
Created 4 years ago
Comments:24 (7 by maintainers)

Top GitHub Comments

4reactions

Trobbdorcommented, Oct 22, 2019

My workaround was inspired by this similar Material-UI issue, where one suggestion was to make the label border white.

Using this Stackoverflow answer as guidance, I have this scoped styling:

    >>>label{
        background-color:white 
    }

3reactions

johnleidercommented, Jun 14, 2019

Beyond the suggestion that @jacekkarczmarczyk provided, you could also use a dynamic key to force re-rendering of the inputs. This will also retain the state of the inner items.

https://codepen.io/johnjleider/pen/rExOod

Otherwise, there is not much we can do.

If you have any additional questions, please reach out to us in our Discord community.