Directory

← Back

FloatingTextField Add-on

Add-on for floating style placeholder for TextField

Author

Contributors

Rating

A Vaadin 8 TextField with a floating style placeholder.

Sample code

// FloatingTextField with validation

FloatingTextField validationField = new FloatingTextField();
validationField.setPlaceholder("Validated field");
binder.forField(validationField)
     .withValidator(new StringLengthValidator(
     "Text must be between 1-10 letters", 1, 10))
            .bind(s -> text, (s, input) -> text = input);
// Styling FloatingTextField placeholder
.floatingTextFieldWidget {
	font-size: 11px;
	transition: top 100ms linear, 
		font-size 100ms ease-out;
}
// Styling FloatingTextField placeholder when field is focused
.floatingTextFieldWidgetFocused > .placeholderSpan > .placeholder {
	font-size: 10px;
	font-weight: 600;
	color: green;
}
// modifying height and width in CSS have to have the !important notion
// to override inline style properties of the HTML elements
.floatingTextFieldWidget, .floatingTextField {
    height: 60px !important;
    width: 200px !important;
}

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • utilizing JSNI for events
  • fixed issue with getting existing placeholder
Released
2017-11-29
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Browser
Firefox
Safari
Google Chrome
Internet Explorer
Microsoft Edge

FloatingTextField Add-on - Vaadin Add-on Directory

Add-on for floating style placeholder for TextField FloatingTextField Add-on - Vaadin Add-on Directory
A Vaadin 8 TextField with a floating style placeholder.
Online