Float Container
.c-float-container
The Float Container is a wrapper for new form elements like Input Fields, Textareas or Selects. It provides the "Floating Label" styling and can be combined with Buttons or Checkboxes.
- See Input Group for more complex examples.
Float Container Example
Show Code
html
<div class="grid">
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-example">Float Container with Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input -is-active">
<label class="c-label" for="input-example">Float Container with Active Label</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-example" name="" value="" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input m-y-reset print-no-bg print-m-b-xl -has-changed">
<label class="c-label -redesign" for="unterschrift">Float Container with very long label description text-overflow example </label>
<input class="c-input" type="text" id="unterschrift" value="">
</div>
</div>
</div>Float Container Hint
TIP
The hint text is optional and can be used to provide additional information about the input field.
.c-float-container + .c-float-container__hint
This is an optional hint.
This is an optional hint as child element.
This is an optional error hint.
This is an optional warning hint.
This is an optional success hint.
Show Code
html
<div class="h-flex h-flex-column">
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-hint1">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint1" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-hint2">Textarea with Hint</label>
<textarea type="text" class="c-textarea" data-placeholder=".. and Placeholder Text" id="input-hint2" name="" value="Default value"></textarea>
</div>
<span class="c-float-container__hint">
This is an optional hint as child element.
</span>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-example3">Error Input with Hint Message</label>
<input type="text" class="c-input -error" data-placeholder=".. and Placeholder Text" id="input-example3" name="" value="" />
</div>
<span class="c-float-container__hint">
This is an optional error hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<label class="c-label" for="input-example4">Warning Input</label>
<input type="text" class="c-input -warning" data-placeholder=".. and Placeholder Text" id="input-example4" name="" value="" />
</div>
<span class="c-float-container__hint">
This is an optional warning hint.
</span>
</div>
<div class="col">
<div class="c-float-container -has-select -is-active">
<label class="c-label" for="default-select">Example with Select Box</label>
<select class="c-select -success" id="default-select" name="default-select">
<option value='1'>First item</option>
<option value='2'>Second item</option>
<option value='3'>Third item</option>
<option value='4'>Lorem Ipsum</option>
<option value='5'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
<option value='6'>lorem ipsum dolor sit amet consectetur adipisici elit</option>
<option value='7'>Just an item</option>
<option value='8'>Last item</option>
</select>
</div>
<span class="c-float-container__hint">
This is an optional success hint.
</span>
</div>
</div>Examples With Small Fields
This is an optional hint.
This is an optional hint.
This is an optional hint.
This is an optional hint.
Show Code
html
<div class="h-flex h-flex-column">
<div class="col">
<div class="c-float-container">
<input type="text" class="c-input -old -error" data-placeholder=".. and Placeholder Text" id="input-sm-hint1" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<input type="text" class="c-input -old -success" data-placeholder=".. and Placeholder Text" id="input-sm-hint1" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<textarea class="c-textarea -warning" name="" id="textarea1" cols="30" rows="10" data-placeholder=".. and Placeholder Text"></textarea>
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
<div class="col">
<div class="c-float-container">
<select class="c-select -old -notice" name="opts">
<option value="6">Kapseln</option>
<option value="7">Tabletten</option>
<option value="8">Ampullen</option>
<option value="9">Milligramm</option>
<option value="10">Einheiten</option>
</select>
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
</div>
</div>Validation Messages in Comparison
See Form for more information about form validation.
This is an optional hint.
This is an optional hint with longer content.
- Dies ist ein Pflichtfeld.
Dies ist ein Pflichtfeld!
Show Code
html
<div class="grid">
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint-ex1">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint-ex1" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint.
</span>
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint-ex2">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint-ex2" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="input-hint2">Input with Hint</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-hint2" name="" value="Default value" />
</div>
<span class="c-float-container__hint">
This is an optional hint with longer content.
</span>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f5">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f5" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input -light parsley-error">
<div id="errorlastName" class="errorHolder"><ul class="parsley-errors-list filled" id="parsley-id-3150"><li class="parsley-required">Dies ist ein Pflichtfeld.</li></ul></div>
<label class="c-label" for="parsley">
Parsley Error
</label>
<input data-parsley-errors-container="#errorlastName" required="" data-parsley-minlength="2" data-parsley-minlength-message="Bitte tragen Sie mindestens 2 Zeichen ein" data-parsley-trigger="focusout" data-parsley-group="block1" class="c-input" id="parsley" type="text" name="parsley" data-parsley-id="3150">
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f1">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f1" name="" value="Default value" />
</div>
</div>
<div class="col">
<div class="c-float-container -has-input">
<label class="c-label" for="powermail">Powermail Error</label>
<span class="error-msg">Dies ist ein Pflichtfeld!</span>
<input type="text" class="c-input" name="name" id="powermail">
</div>
<div class="c-float-container -has-input">
<label class="c-label" for="input-f2">Following Input</label>
<input type="text" class="c-input" data-placeholder=".. and Placeholder Text" id="input-f2" name="" value="Default value" />
</div>
</div>
</div>
<div>
<div class="c-float-container -has-checkbox">
<div class="c-checkbox parsley-error">
<input id="fachkreise" type="checkbox" value="1" data-parsley-multiple="tx_registration_basenewFrontendUserfachkreise" data-parsley-id="6522" placeholder="">
<label class="c-label" for="fachkreise">Fachkreise (§§ 3, 10 HWG): Hiermit bestätige ich, dass ich zu den Fachkreisen gehöre (z.B. Pharmazie-Student, -Praktikant, Apotheker, Pharm. Personal, Mediziner oder sonstiger
Heilberufler)</label>
</div>
<div id="errorfachkreise" class="errorHolder">
<ul class="parsley-errors-list filled">
<li class="parsley-custom-error-message"><p>Die Inhalte auf pharma4u richten sich ausschließlich an Heilberufler. Sie müssen den pharmazeutisch-medizinischen Fachkreisen angehören.</p></li>
</ul>
</div>
</div>
</div>Settings and API
The Floating-Label functionality is handled in the Form-Module.
TIP
Initializes the Form Module with or without custom settings and registers Event-Listeners: Form.init(settings: object);
Activate Float: Form.activateFloat(element: Node);
Deactivate Float: Form.deactivateFloat(element: Node);
Activate disabled button: Form.activateInlineBtn(button: Node);