-
Notifications
You must be signed in to change notification settings - Fork 556
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
Bootstrap 5 floating labels #3265
Comments
Sure, no one requested it before.
Could you please replicate what you've done using stackblitz in order to check it on my side. Thank you! |
Here a stackblitz with the template I also added the corresponding html form for comparison convenience |
you may need to adjust floating-labels to take account of nested selector, here is a quick attempt https://stackblitz.com/edit/ngx-formly-ui-bootstrap-ufagnu |
Thank you for that! This confirms the problem with the bootstrap css. Do you think that formly would be somehow able to produce an html compliant with the bootstrap expectations? |
Hello, |
Yes possible. |
fix ngx-formly#3265 BREAKING CHANGE: To customize style of bootstrap types rely on `formly-wrapper-form-field` instead of the following selectors: - `formly-wrapper-addons` - `formly-field-checkbox` - `formly-field-input` - `formly-field-multicheckbox` - `formly-field-radio` - `formly-field-select` - `formly-field-textarea`
fix #3265 BREAKING CHANGE: To customize style of bootstrap types rely on `formly-wrapper-form-field` instead of the following selectors: - `formly-wrapper-addons` - `formly-field-checkbox` - `formly-field-input` - `formly-field-multicheckbox` - `formly-field-radio` - `formly-field-select` - `formly-field-textarea`
This issue has been fixed and released as part of v6.0.0-beta.0 release. To use floating label, pass Please let us know, in case you are still encountering a similar issue/problem. |
It works very well, thank you! 😃 But it seems to be not compatible with addon icons 😢 Is there any way to set both floating labels and addon icons? For example this is ok:
=> but this is not:
=> Thank you! |
Thank you |
Sorry to bother you again, Is there any example on the documentation to start from? I tried to add the
that I see you added with #3304, but it seems to be not enough 🙏 |
- import { FieldType } from '@ngx-formly/core';
+ import { FieldType } from '@ngx-formly/bootstrap/form-field'; |
I found the problem with my custom template: I have a constructor to inject a service into the component. This works with FieldType from core, but not from bootstrap/form-field If I add something like:
the field disappears. Here a stackblitz with some tests, including a custom field (but with the constructor commented out) |
passing constructor(private myCustomService, containerRef: ViewContainerRef) {
super(containerRef);
} |
Thank you! |
Issue closed and released with bootstrap 5.2 🚀 Is the support for addon icons + floating labels expected to be "automatically working" on formly or some changes on your side would be needed? I tried today with bootstrap 5.2 but I can't see large difference 🤔 |
I think so |
Tried on stackblitz with bootstrap 5.2+ but with no luck 😢 https://stackblitz.com/edit/ngx-formly-ui-bootstrap-jm5wke Something wrong on my side? Thank you for your precious help! 🙏 |
Question
Following the suggestion in #2603 I tried to define a custom wrapper to implement floating labels as introduced with bootstrap 5, but i can't get it to work
The template is pretty simple
or even simplified is:
The problem that I found is that <ng-template #fieldComponent> wraps the input field with a
formly-field-input
element producing an html like:And this is not accepted by bootstrap, that requires both input and label to be direct children of the .form-floating div
This is the css extracted from bootstrap:
Could you suggest me how to properly set this template?
And on a more general sense: is there any plan to support floating labels directly in formly?
Thank you for your help!
The text was updated successfully, but these errors were encountered: