FloatLabel: Add support for SelectOneMenu,AutoComplete,DatePicker
See original GitHub issueDescription
Could we have floatlabel in SelectOneMenu, AutoComplete, DatePicker like we have in PrimeReact, today I do some css workarounds to have something like that, it would be very interesting to have this in primefaces for jsf. https://primefaces.org/primereact/showcase/#/floatlabel
Describe the solution you would like Using the same strategy that we have in traditional inputs, have the possibility of placing the float-label behavior in the inputs (SelectOneMenu, AutoComplete, DatePicker).
Additional context Float label is very interesting, when there are many inputs inside a form consuming less space on the grid, besides that it is much more modern than traditional labels, due to its js/css animation.
Example XHTML
<span class="ui-float-label">
<p:selectOneMenu id="select" value="#{selectOneMenuView.selectedOption}">
<f:selectItem itemLabel="Option1" itemValue="Option1"/>
<f:selectItem itemLabel="Option2" itemValue="Option2"/>
<f:selectItem itemLabel="Option3" itemValue="Option3"/>
</p:selectOneMenu>
<p:outputLabel for="select" value="Float Label here..."/>
</span>
Issue Analytics
- State:
- Created 3 years ago
- Reactions:1
- Comments:8 (6 by maintainers)
Top Results From Across the Web
Angular 6 Material matdatePicker with floatLabel on form field
Seems like a validation error should have been displayed, if the input is gibberish or not in a format understood by Date Picker....
Read more >SelectOneMenu - PrimeFaces Showcase
SelectOneMenu. SelectOneMenu is used to choose a single item from a list. SERVER API CLIENT API. Basic. Select One, Option1, Option2, Option3. Select...
Read more >Style and appearance in Blazor AutoComplete Component
Style and Appearance in Blazor AutoComplete Component ... Use the following CSS to add the mandatory indicator * to the float label element....
Read more >Form field | Angular Material
The mat-form-field supports 4 different appearance variants which can be set ... any text or when <select matNativeControl> does not show any option...
Read more >Floating labels · Bootstrap v5.0
Selects with size and multiple are not supported. ... label select example"> <option selected>Open this select menu</option> <option value="1">One</option> ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I can look and see how PrimeReact is doing it and maybe modify ours. Our current float label was based on PrimeReact.
@Teutron-flo thanks for the report. See my PR just have to move where
bindFloatLabel
happens to fix it.