README

Description

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

Settings

ThemeManager

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

JavaScript

By modifying the file js_ctm_placeholderlabel, you can modify and override the placeholder label init.

Options

{
    selector: 'form',         // Parse selector
    autofill: true,           // Consider autofilled fields as well
    inputs: {
        parent: 'div.widget', // Parent input selector
        label:  'label',      // Label
        include: [            // Included input types
            'input',
            'select',
            'textarea'
        ], 
        exclude: [            // Excluded input types  
            '[type="checkbox"]',
            '[type="radio"]',
            '[type="range"]',
            '[type="hidden"]',
            '[type="submit"]',
            '[type="file"]',
            '[class="rsas-field"]']
    },
    onFocus:  () => {},       // Callback on focus
    onBlur:   () => {},       // Callback on blur
    onChange: () => {},       // Callback onChange
    onInit:   () => {}        // Callback onInit
}

contao-thememanager / ctm-placeholder-label

Maintainers

Details