FloatingTextField Add-on
Add-on for floating style placeholder for TextField
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; }
Links
Compatibility
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 TextFieldA Vaadin 8 TextField with a floating style placeholder.