Project

General

Profile

Actions

Support #10871

closed

Bootstrap 5 Forms with floating labels are not corretcly rendered with progressive-bootstrap=true

Added by Stefan Bn over 1 year ago. Updated about 1 year ago.

Status:
Closed
Priority:
Normal
Assignee:
-
Target version:
-
Start date:
08/26/2022
Due date:
% Done:

0%

Estimated time:

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

main.cpp (2.23 KB) main.cpp Stefan Bn, 08/26/2022 02:01 PM
FloatingLabels_Bug.PNG (5.83 KB) FloatingLabels_Bug.PNG Stefan Bn, 08/26/2022 02:02 PM
bs5_forms.cpp (2.03 KB) bs5_forms.cpp Roel Standaert, 03/10/2023 02:31 PM
Actions #1

Updated by Roel Standaert over 1 year ago

  • Target version set to 4.9.0
Actions #2

Updated by Roel Standaert over 1 year ago

  • Target version changed from 4.9.0 to 4.10.0
Actions #3

Updated by Roel Standaert about 1 year 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.

Actions

Also available in: Atom PDF