Now you can “labelize” (put an automatic label) to your native input fields and native multi-line input fields without change design or structure of your project. It can be animated as in Material Design.
Where to find it
The plugin is a workflow action so you have to add it into an event, for example inside the “Page is loaded” workflow event. Labelizer action is in Plugins → Labelizer. Be sure that when the event where the action is, is called, the input fields are visible.
Set input ID
Labelizer uses the ID of the input field to display and name the label.
First we need to enable the option in Settings → General → “Expose the option to add an ID attribute to HTML elements”. Then we can add a special ID to the input where we want to display the label. The ID consists of a first part “labelizer_” and a second part which is the text of the label, where spaces should be underscores. For example: labelizer_This_is_a_label.
Look at this!
Thanks to @bubblernz who saved the placeholder with his suggestion.
Are you already satisfied? So go to the plugin page
Hi @steven11,
I just tried the EDIT button in the sandbox and it seems to work, however, for now, you cannot change the label formatting, but in the next version. You can only set if it is fixed or animated, for now.
Give me some suggestions of what you would like it to do. Bye and thanks.
I really like the component! The main benefit for me - besides the nicer and cleaner UX - would be setting up forms much quicker as separate labels aren’t neccessary.
Your sandbox page has a lot of workflows going on for the UX making it a bit hard to seperate what is used for labelizer and what not.
I’m I correct in assuming that the only necessary workflow to have is this one:
Font family
It is used to set the font family of the labels. To do this you can, either type in the family name (e.g.: Lato) if this is already among the fonts used on the page, or you can set a new font in the “Style variables” and type in “var(–font-[variable name])”
Also: if there is a text element directly above the input: this is then pushed down to below the input field, but this is not how it is set up in the design. Not an issue for me atm. But there could be a valid use case for having text above the input field which should not move.
Search Box element seems not to be supported yet, but is part of the forms I use. So would be much appreciated if this would be added.
Tiny request: Would be nicer being able to set ID with L_Label_Name, instead of Labelizer_Label_Name. This plugin is all about convenience. Or Maybe $L_Label_Name
Still have the feature request to be able to set the label-background-color (and set negative alignment (padding) values), so you can create a proper material design label type: Material Design
Hi @steven11 ,
After a tons of requests, I’m working for a new reform release (but back compatible) more complete and customizable, however this takes several days. Be patient and you will be rewarded.
ID prefix
With this parameter you can choose a custom ID prefix to name your inputs. This allow you to run different labelizer actions to different inputs.
Top
Change the label initial position by moving from top.
Left
Change the label initial position by moving from left.
Background color
The background color of the label. Transparent if it is not set.
One small issue with this new release.
The normal placeholder position & font-style now seem to be changed. This wasn’t the case before? See below. Top one labelized, bottom one regular:
Sorry Steven, but there’s not placeholder placement and fontstyling issue I think. I tried some composition and I can’t found an error like yours as you can see below.
The first is labelized, the second not.
An advice: Check and play the padding parameters for position and with Font family and Placeholder color for the style. I think that is the problem.
If you can’t solve the issue you grant me to your app so I can check what’s the problem (obviously for free).
For the hover issue (that don’t work when labelizer is animated only) you have to wait several time for a solution. Meantime, try to not use hover event in input (moreover, hover event is completely useless in the mobile devices).
Thank you very much for your appreciation and I hope I’ve been helpful. Bye.
But there’s extra padding being put in by the plugin that I have no control over and it only applies it to text fields so I get this uneven layout when displayed
I’ve also noticed that if I open a blank copy of a form, close it (which calls a reset inputs in the workflow) then open the same form but this time with pre-filled data the label and the filed data show over each other
Also would it be possible to have all values set by a database field (like you do for colour) ? That way I could add in constants and only change them once and update the whole app.
I know. I’m sorry but you have to wait several time for a Labelizer for Multi-select and Dropdows because a different structure to be implemented. About Input field (every types) the next release (1.3.1) will fix the problem.
This is a “must be” limitation. The “extra padding” is the invisible label present above the input where the animated label have to be placed at the and of animation. In your design you have to calculate this space like necessary. This is not a really limitation but, if you use the animated label you need a space to place it. Isn’t it?
This issue would be fixed in the new release 1.3.1. Update and refresh multiple times you editor.
1 - Now you can set the Labelizer parameters with dynamic data.
2 - When you change input types Labelizer won’t works - FIXED
3 - Extra labels when you call Labelizer multiple times - FIXED
Firstly thanks for the super fast update I really appreciate it!
All your fixes look great and have resolved what I noted. I will wait for the new structure for multi lines and dropdowns. this will be fantastic when its available
Yes in principle I agree with you but that should be up to the designer. I don’t know how much space you have allowed for and rather than use responsive design and set up cell gaps I have to individually set spaces for some elements. This may become less of an issue when you support dropdowns etc but some elements will never be controlled (like checkbox) and they will always be misaligned if labelizer ignores them and adds in space for other types. - Just some food for thought you are the developer
The designer works and solves problems with the tools he may have, and unfortunately, I cannot accommodate him on this issue. I’ll explain more about why.
When Libelizer sets inputs with an animated label, if we were to consider an initial state where above the input there are no extra spaces, when it animates to place itself above the input, it will have to create that space. The end result, will be much more problematic than extra space to manage, in fact, the animation will create a very ugly shifting effect of the inputs being focused or, in static condition, a different space will be created between the inputs with default values and the empty ones. I hope you can imagine the disaster
Some solutions:
There’s not an elegant way to show to the designer how much space will be created by Labelizer: It depends by 5 parameters:
Font size
Label H padding
Label W padding
Top translation
Left translation
that you set.
So, you can open the browser inspection by Mouse Right Button click → Inspect to get the actual size of the space.
(when will be supported search, dropdown, etc…) Just add some padding to checkbox elements only. Given what I said, I think it is a small cost to bear.
I love critics. I am who I am because 30 years of experience made by critics. So I really thanks you very much.
