fix(Input): hide wrapper when type is hidden
#1797
Conversation
Wrapper is hidden when type="hidden". Otherwise it may break the layout (i. e. when it is part of a grid with gap > 0)
|
@Tarabass Thanks! Never seen that style before, sorry. Shall I change the code to class object? |
|
Maybe one of the maintainers can answer that. For me it doesn't matter that much :) |
|
I'd like to ask, why use a |
|
@benjamincanac In my case the value of the field has to be sent to the backend via the form. But depending on a prior input of the user the field should be visible and editable. I was using You can close the PR if the change is not clean code! 🤓 |
| @@ -1,5 +1,5 @@ | |||
| <template> | |||
| <div :class="ui.wrapper"> | |||
| <div :class="(type === 'hidden') ? 'hidden' : ui.wrapper"> | |||
There was a problem hiding this comment.
The ui.wrapper contains the relative class for absolute icons underneath, did you try with icons?
There was a problem hiding this comment.
No, I did not style the input with icons.
As I mentioned in the description, when the UInput is part of (for example) a div.grid.gap-4 the div.relative (ui.wrapper) of UInput will cause a gap between other elements - that's the root of my PR.
There was a problem hiding this comment.
But semantically you're absolutely right, there is not much sense of using a UI library for a hidden input-field - it just felt right for me to "fix" this 😅
benjamincanac
changed the title
hidden
🔗 Linked issue
Resolves #1784
❓ Type of change
📚 Description
In some layout, i. e. a grid with gap-4, the wrapper is still existent. Therefore there are two gaps between the previous and following visible elements.
Now the wrapping div has class 'hidden' when type="hidden". Otherwise it has the classes from
ui.wrapper.📝 Checklist
Sorry, I couldn't resist to try the PR. 🤓
Hope everything is according to the conventions. Don't hesitate to change anything or close the PR if I made a mistake 🙈