Support #10871
Bootstrap 5 Forms with floating labels are not corretcly rendered with progressive-bootstrap=true
0%
Description
The small attached sample 'main.cpp' demonstrates the problem:
When using Bootstrap 5 floating labels on several form fields, the first form field is not rendered correctly. See image attached 'FloatingLabels_Bug.png'.
I figured out that this behavior depends on this flag in wt_config.xml:
<progressive-bootstrap>true</progressive-bootstrap>
When progressive-bootstrap is set to true, the bug occurs.
When progressive-bootstrap is set to false, all form fields are rendered correctly.
This referes to Wt 4.8.0 build with clang64 on Windows 10 and Firefox/Edge.
Files
Updated by Roel Standaert 3 months ago
- File bs5_forms.cpp bs5_forms.cpp added
- Tracker changed from Bug to Support
- Status changed from New to Closed
- Target version deleted (
4.10.0)
The problem is simply that you are using a <form> tag in your template.
<form>s can't be nested, and Wt without JavaScript (e.g. when using progressive bootstrap) automatically adds a <form> tag around the entire page.
Just change your <form> to a <div>.
Another issue in your sample: you are reusing the same id. You should use the id function instead so that Wt can dynamically add the right id to the for attribute of the <label>.
I attached a fixed version of your code.