-
Notifications
You must be signed in to change notification settings - Fork 438
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weβll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Works great!
I prefer class objects though for future enhancements like:
<div :class="{ 'hidden': type === 'hidden', 'ui.wrapper': type !== 'hidden' }">
But that doesn't change the behavior..
@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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The ui.wrapper
contains the relative
class for absolute icons underneath, did you try with icons?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 π
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 π