How to correctly set p:autoComplete width to fill a panel

primeng autocomplete width
primeng p-tree width
primeng autocomplete style
p-tabpanel width
p-listbox width
p message primeng width
md-autocomplete width: 100
p-growl primeng

How can I set the autoComplete width to fill the panel correctly?

As you can see, using:

.ui-autocomplete input {
        width: 100%;
    }

will put the arrow out of the panel

EDIT: panelGrid

<p:panelGrid columns="3" style="border: hidden; width: 100%" styleClass="ui-panelgrid-blank">
                        <p:panelGrid>
                            <p:outputLabel value="Item name" for="haveName" />
                            <br/>
                            <p:autoComplete id="haveName" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Paint" for="havePaint" />
                            <br/>
                            <p:autoComplete id="havePaint" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>

                        <p:panelGrid>
                            <p:outputLabel value="Certification" for="haveCert" />
                            <br/>
                            <p:autoComplete id="haveCert" effect="fade" dropdown="true" forceSelection="true"/>
                        </p:panelGrid>
                    </p:panelGrid>

EDIT2: this is what happens when I set style="width: 100%" in the autoComplete tag:

EDIT3: this happens when I combine both:

If someone else is wondering how to achieve a full responsive autocomplete component on:

PrimeNg version: 4.0.3 Angular: 4.0.3

For me the only possible thing on earth that worked was a combination of this styles :

 [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" class="p-autocomplete"

with the following definition of the css:

.p-autocomplete{
    width: 100%;
  }

Hooope this helps!

css - How to correctly set p:autoComplete width to fill a panel, How can I set the autoComplete width to fill the panel correctly? autoComplete. As you can see, using: .ui-autocomplete input { width: 100%; }. will put the arrow  Then you don't need [style] and [inputStyle]. This will obviously apply to every autocomplete, but it's probably the exception that you don't want the control 100% width of its container..ui-autocomplete-multiple { width: 100% !important; } .ui-autocomplete-multiple-container { width: 100% !important; }

It Worked for me this way

.ui-autocomplete{
width: 100% !important;}
.ui-autocomplete-input{
width: 90% !important;}

How to correctly set p:autoComplete width to fill a panel, How can I set the autoComplete width to fill the panel correctly? As you can see, using: .ui-autocomplete input { width: 100%; } will put the arrow out of the panel  [ Natty] css How to correctly set p:autoComplete width to fill a panel By: snakedog 2.5; [ Natty ] mysql mySQL SELECT upcoming birthdays By: Ankit Verma 1.0 ;

Use the !important css declaration.

PrimeNG ULTIMA 5.2.0, PrimeNG 5.2.0

Setting the style width for .md-autocomplete when your <p-autoComplete> element is children of an ui-inputgroup

will cause the width being overwritten by the definition body .ui-inputgroup *[class^="md-"].

Take a look how the width in .md-autocomplete gets overwritten (at bottom):

You should make you definition !important Take a look how the width in .md-autocomplete gets not overwritten (at bottom):

And additionally the style attribute of the element p-autoComplete should look like: [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}".

how to make p-autocomplete width 100% in whatever div it is in , All I have successfully done is assign [size]=number or [inputStyle]={'width': '​100px'}, but these are static widths. I want the input box to grow/  Panel size changed to {Width=274, Height=254} Now observe the output closely. We have changed TextBox's minimum width to 166 pixels, but at that moment Panel's width is only 137 pixels. Further on, width of the panel is increased to 274 pixels, but this takes effect only after Panel's Layout event is handled.

In PF 6.1 <p:autocomplete> has a size attribute for this, setting it to "100%" works for me.

Issue on size for <p:autoComplete>, I'm using an <p:autoComplete> component inside a md-inputfield. It's always getting the same size (2 columns), regardless of how many columns I put into the component. of ui-grid-col-*; https://www.primefaces.org/showcase/ui/panel/grid. id="acCity" value="#{empMB.city}" inputStyle="width: 100%;  AutoComplete displays suggestions while the input is being type. AutoComplete features various options, customizable content, multiple selection, effects and events. throw new ConverterException ( new FacesMessage (FacesMessage.SEVERITY_ERROR, "Conversion Error", "Not a valid theme." Built-in component themes created by the PrimeFaces Theme

Bootstrap Panels, Basic examples · Autocomplete · Builder · Checkbox · Contact form Panels have no fixed width to start, so they'll naturally fill the full width of their parent element. class="card-title">Panel title</h5> <p class="card-text">Some quick example Custom CSS can be used in your stylesheets or as inline styles to set a width. Join a community of over 2.6m developers to have your questions answered on Full Width Panel Inside FlowLayoutPanel of UI for WinForms Panel. set to Dock Fill

Example: <amp-autocomplete>, An autocomplete-enabled input field suggests completed results Setup. Import the amp-autocomplete component. <script async <template type="amp-​mustache"> Successfully submitted {{city}}! </template> </div> <div submit-error> Error! width="24" height="24" src="/static/samples/img/trending.png"></amp-​img>  Set the Width of the FlowLayoutPanel control to 300, and set its FlowDirection to TopDown. Create two Button controls, and place them in the FlowLayoutPanel control. Set the Width of the first button to 200. Set the Dock property of the second button to Fill.

DataTable inside Dialog results in wrong width - jsf-2, How to correctly set p:autoComplete width to fill a panel. How can I set the autoComplete width to fill the panel correctly? As you can see, using: .ui-​autocomplete  Help users checkout faster with Autofill. We’ve found that by correctly using autocomplete attributes on your forms, users complete them up to 30% faster!

Comments
  • To fill what panel?
  • I have added the panelGrid code of my .xhtml page
  • But why do you size the input in the autocomplete and not the autocomplete itself then?
  • Check my second edit.
  • And what if you combine both? It is all plain css... Nothing jsf or PrimeFaces specifically. And the client-side generated html is way more important here.
  • Sure a better selector does not work instead of using !important