Prime Community Forum

Posted: **08 Oct 2019, 08:16**

Hi, frist of all, amazing Comunity and thanks alot for previous answers.
Im having a problem Setting up a Dropdown Menu with Serenity. Its there, but as soon as i develop a filter its shown as an input box and the dropdown. How can i get rid of this box and just type in the dropdown to filter a certain list out of a Database?

<p:selectOneMenu id="lokation" value="#{DropdownView.lokation}"style="width:90%">
<p:ajax listener="#{dropdownView.onCountryChange}" update="city" />
<f:selectItem itemLabel="Displayname der Lokation: " itemValue="" noSelectionOption="true" />
<f:selectItems value="#{DropdownView.displayLokation}" />
</p:selectOneMenu>
I have to develop this Dropdown which have to look like the one on Serenity, this one with the bar in the autocomplete section. Problem is, it doesnt show up like this, worse if i develop a filter.
Is there a workaround for this?
Thanks in advance

Posted: **09 Oct 2019, 08:07**

Hi,

I don't know exactly where you want to put it. Could you please attach your page or a screenshot for us?

Posted: **09 Oct 2019, 11:24**

aragorn wrote: ↑
09 Oct 2019, 08:07
http://prnt.sc/pgtv4p
http://prnt.sc/pgubex
This is the dropdown, i would like to not have the Inputbox and the search icon. We would like to type right after clickling on the Dropdown view and after that show the List out of a Database.
Can this be fixed?
Greetings, and thanks in advance

Hi,

I don't know exactly where you want to put it. Could you please attach your page or a screenshot for us?

Posted: **11 Oct 2019, 12:29**

Hi,
I made some changes on the style of Dropdown with filter. Please try;

Code: Select all

<style type="text/css">
    body .ui-selectonemenu-panel .ui-selectonemenu-filter-container {
        width: 100%;
        padding: 0.714em 1em;
        padding-bottom: .1em;
    }
    body .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-inputfield {
        padding-right: 30px;
        width: 100%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    body .ui-selectonemenu-panel .ui-selectonemenu-filter-container .ui-icon {
        right: 12px;
    }
</style>

I have to develop this Dropdown which have to look like the one on Serenity, this one with the bar in the autocomplete section. Problem is, it doesnt show up like this, worse if i develop a filter.
Is there a workaround for this?

- Maybe, you can use dynamic attribute; https://primefaces.github.io/primefaces ... ectonemenu

Posted: **12 Oct 2019, 18:59**

thanks very much, this has been very helpfull!!!

Posted: **14 Oct 2019, 08:19**

Glad to hear, thanks a lot for the update!

Best Regards,

Prime Community Forum

Dropdown Menu

Dropdown Menu

Re: Dropdown Menu

Re: Dropdown Menu

Re: Dropdown Menu

Re: Dropdown Menu

Re: Dropdown Menu