CODEWITHSUNDEEP
autocompleterichfacesjquery-autocomplete
John John
John John

Reputation: 4575

Rich Faces's 4.0 Autocomplete component don't fit size

I have a autocomplete component, but it doesn't fit like I want.

I want the pop up width fitting the input field, same size... I tried a lot of attributes but without success.

Is this, maybe, a limitation?

enter image description here

See that, pop up is smaller than the origin input field. What do I need to do?

.inputPesquisa {
width: 77%;
}

...

<div class="pesquisa">
        <rich:autocomplete value="#{pesquisarBean.pesquisa}" styleClass="inputPesquisa"
            autocompleteList="#{bean.todos}" minChars="4" mode="client" layout="div">
            <div>ata</div>
        </rich:autocomplete>
        <a4j:commandButton value="Pesquisar" render="out, scroller"
            styleClass="botaoPesquisa" execute="@form"
            actionListener="#{pesquisarBean.processAction}" />
            <rich:messages showDetail="false" ></rich:messages>
    </div>

Upvotes: 1

Views: 1568

Answers (1)

kauedg
kauedg

Reputation: 817

I just ran into your question, tho it's a little old.

Create the following CSS style if you want to change your text box input properties:

.inputPesquisa .rf-au-inp {
    width: 350px;
}

I tried creating the style with all the style tree and this works (for all autocomplete components):

.rf-au-lst-cord .rf-au-shdw .rf-au-lst-dcrtn .rf-au-lst-scrl {
    max-height: 300px; /* Bigger than this shows scroller */
    width: 100%; /* This is enough to make all the autocomplete lists look nice */
}

But when I try to add the component's class

.inputPesquisa .rf-au-lst-cord .rf-au-shdw .rf-au-lst-dcrtn .rf-au-lst-scrl {
    max-height: 300px;
    width: 100%;
}

It doesn't work anymore. Maybe it's the case of opening a Jira. So, just cut to the chase and include this in your CSS:

.rf-au-lst-dcrtn .rf-au-lst-scrl {
    max-height: 300px;
    width: 100%;
}

Upvotes: 2

Related Questions