Hi,
Are these classes supported(visually) in Wappler? If not is it possible to add them?
Jon
If you are running BS4, then yes you can manually add these to your pages.
Yeah manually I know I can. Actually it’s how I figured it wasn’t supported visually.
I was under the impression that all BS4 elements were available as components. But now that I write this I see why that would be complicated 
Nonetheless it should be something the team aims for.
2 Likes
They have this option in dmxzone bs3 form I’m not sure why they didn’t include it bs4 forms.
1 Like
+1
I’ve updated the title to Bootstrap 5. 
1 Like
Maybe Floating Labels can be added to the request.
5 Likes
@george, maybe some love for these two components?
The problem is not being able to add them from the UI. I wish I could just add the html code but unfortunately you just can’t do that as the validation messages get in the way.
App Connect validation component is extremely opinionated because it appends the html code for the validation messages. This makes it very difficult to add standard bootstrap components that are not supported by Wappler’s AC and UI.
The long term solution would be to refactor the validation library into something less opinionated. Like letting us add a validation message as a node in the App Structure panel and making the JS component target those nodes instead of appending the html directly.
The short term solution is add to the dmxValidator.js support for input groups and floating labels plus the UI components.
We are missing on some nice components that beautify our forms.
3 Likes
I would attempt to convert my BS4 dashboard to BS5 if we had this option.
1 Like
Have you had a look at:
As a side note, Input groups and Floating labels do not mix too well.
2 Likes
Thanks Ben! I will have a look!
@george screw floating lables. In retrospective and after implementing them I can see they are bad UX for forms.
Input groups though are nice
It would help if you backed the statement up with facts.
Here is a video that explains why placeholders are bad for UX.
Floating labels helps the user to remember what they are supposed to enter.
3 Likes
I’m currently pursuing IFTA labels.
2 Likes
Cool stuff these IFTA labels although the CSS is tricky. Still a lot of work ahead but hopefully I nail the CSS within the next days and I can share it.
With errors:
4 Likes
Great informations about IFTA! Thanks for sharing this!
With BS5, we can just disable the animation on floating labels so it’s at least not moving but stays on top, inside the input, very easily with something like this:
.form-floating label {
transform: scale(.85) translateY(-.5rem) translateX(.15rem)!important;
}```
4 Likes