-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
feat: built-in 'underline' for form control #27239
Comments
Hello @Wasenshi123 thanks for this feature request. Can you perhaps take a screenshot from your example of which behavior you are referring to for the underline form control? In your original desired UI you are using floating labels, but in the modern syntax you are using fixed labels instead. I forked your example to make them consistent: https://stackblitz.com/edit/3we1ad-a1b8sd?file=index.html Outside of the small visual adjustments between legacy and modern to align with the Material design spec, I don't currently see an issue with the underline between the displays. |
I mean to have the ability to set this on the form control As I demonstrated, I tried to add it manually with css on the new syntax one, but that's not quite the exact feeling because it underline the whole thing. So I think the built-in feature for this would be nice. |
@sean-perkins I see now what is your point. Please see this screen shot, my desired structure has the behavior to change label placement based on screen size. So at wider screen, the difference is noticeable: My example is also updated to dynamically change label placement now. |
Thank you for the extra detail + screenshots! I understand the differences now 👍 The underline border always being visible could be accomplished if Ionic exposed shadow parts for the native wrapper on each control (or CSS variables for border, since not all controls use shadow dom). The underline width is a much larger task. For Here is an example concept with manually modifying the DOM and adjusting styling: Kapture.2023-04-21.at.14.12.17.mp4
A mock API could look like: <ion-input label="Name" label-placement="fixed" highlight="control"></ion-input> It would support two options I'll discuss with the team and see if there are alternatives that I may be missing or any questions around the feature's feasibility. |
Thinking through the border aspect specifically, we could do something similar to: /* user land styles - border is always visible */
ion-input {
--border-width: 1px;
} The helper/error text styling could be refactored to something similar to this, when active: /* input.scss */
:host(.has-helper-text), :host(.has-error-text) {
--border-width: 1px;
} Lastly, the /* input.scss */
.input-wrapper {
border-bottom: var(--border-width) var(--border-style) var(--border-color);
} This would allow the default implementation to apply the border style/color when the helper/error text is used, but developers could optionally override and apply the border at any time through the I am going to move this request into a labeled feature request. |
I am keep coming to this issue but it is not solving my problem. Since Ionic v7 you removed slot="error" which was option to display error in input. Now you put
So I would have 10 inputs in a list and then at the en of the list I will put wall of text for each input what is wrong with entered data? Or I should make a list for each input separately? It totally breaks validation messages for inputs in a list. Or I am missing something essential. On top of it all select doesn't even have |
Prerequisites
Describe the Feature Request
According to this issue : #27236
I am trying to achieve the original look and behavior with new modern syntax about label and AT.
https://stackblitz.com/edit/3we1ad-kzmne4?file=index.html
As you can see, the underline in original is resembling the underline in real paper form for user to fill in the blank.
(But what I tried to do result in the whole thing got underlined, including the label)
It would be nice to have built-in support functionality about this. for each form control (ion-input, ion-select, ion-textarea)
Describe the Use Case
I am trying to achieve the original look and behavior with new modern syntax about label and AT.
https://stackblitz.com/edit/3we1ad-kzmne4?file=index.html
Describe Preferred Solution
No response
Describe Alternatives
No response
Related Code
https://stackblitz.com/edit/3we1ad-kzmne4?file=index.html
Additional Information
As I mentioned, it should be customizable, especially the length (where you want it to underline, the whole, or exclude label and just the fill in area).
The text was updated successfully, but these errors were encountered: