This extension simulates labels as a placeholder and animates them on their active or filled state. The thememanager configuration will be extended by 4 more fields (see settings)
After compiling your theme, make sure to add:
- _placeholderlabel.css to your Layout stylesheet settings
- js_ctm_placeholderlabel to your javascript template
Make sure to follow following order of css files in your layout
- ...
- _theme.css (theme manager core)
- _placeholderlabel.css
| Placeholder Label | |
|---|---|
| Option | Description |
| $pl-input-top-offset | Top offset (+ padding) of the input for form input fields. |
| $pl-textarea-top-offset | Top offset (+ padding) of the input for textarea - elements. |
| $pl-label-filled-top-offset | Top offset of the label if the form field has been filled |
| $pl-label-filled-font-size | Font size of the label if the form field has been filled |
By modifying the file js_ctm_placeholderlabel, you can modify and override the placeholder label init.
{
selector: 'form', // Parse selector
excludeClass: 'pl-none', // Using this class on a <form> will disable plabel
include: [ // Considered fields
'.pl-parent input',
'.pl-parent select',
'.pl-parent textarea'
]
}