question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FloatLabel: Add support for SelectOneMenu,AutoComplete,DatePicker

See original GitHub issue

Description

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:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:8 (6 by maintainers)

github_iconTop GitHub Comments

1reaction
mellowarecommented, Feb 19, 2021

I can look and see how PrimeReact is doing it and maybe modify ours. Our current float label was based on PrimeReact.

0reactions
mellowarecommented, Jun 3, 2022

@Teutron-flo thanks for the report. See my PR just have to move where bindFloatLabel happens to fix it.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found