Ways to adjust the size of a Primeng autocomplete with multiple selections?

I'm new to Angular and I'm attempting to adjust the width of a primeng auto complete component in order to fill the column of a table. I've already experimented with using

style="width: 100%"

but that approach hasn't yielded any results; additionally, I have also tried applying this directly in the HTML file but still no changes occur

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

Current status:

https://i.sstatic.net/ekNyW.png

What I am striving to achieve:

https://i.sstatic.net/j66NI.png

primeng version: 9.0.0

link to access the code: https://stackblitz.com/edit/primeng-tablebasic-demo-p9egw5?file=src/app/app.component.html

cssangularprimeng

Answer №1

It was successful for me using this method, with the font: https://github.com/primefaces/primeng/issues/1552

 <td>
    <div class="ui-fluid">
        <p-autoComplete 
           styleClass="wid100"
           [(ngModel)]="texts" 
           [suggestions]="results"
           (completeMethod)="search($event)" 
           [multiple]="true">
        </p-autoComplete>
    </div>
 </td>

Answer №2

Although my English skills are lacking, I encourage you to put this to the test.

<td class="p-fluid">
            <!-- <input type="text" style="width: 100%" /> -->
            <p-autoComplete [(ngModel)]="texts" [suggestions]="results" (completeMethod)="search($event)"
                [multiple]="true">
            </p-autoComplete>
</td>

I hope this information proves to be beneficial.

Answer №3

What is your preferred web browser? I find that Chrome is performing as anticipated. View image here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When using Ionic 2 and Angular 2, a single click can trigger two events - one on the button itself and another on the element

Hey there, I am facing a bug while using Angular 2 on mobile (with Ionic 2) and despite my efforts, I cannot find any similar issue. Therefore, I could really use your help. The issue is with a textarea and an input element placed one above the other. Whe ...

angulareventsclickfocusionic2

Adjusting containers for optimal display during browser zoom and resize operations

Currently, I have designed a banner using a triangle and rectangle to overlay an image. However, when the browser is zoomed in, there seems to be a gap between these two shapes. I am looking for suggestions on how to better connect or approach this banner ...

htmlcss

I'm encountering problems with downgrading packages in Angular 4

Recently, I inherited an Angular project from my company. Despite being new to Angular, I tried starting the project after running npm install. However, I encountered the error below and provided details of my package in hopes of receiving instructions to ...

angular

The floating left div displays oddly when it wraps onto the next line

I currently have a variable number of floating divs, ranging from 1 to 10. When I display either 1-5 or all 10, they appear correctly: item1 item2 item3 item4 item5 item6 item7 item8 item9 item10 However, when I try to display around 7 of them, things s ...

csshtml

Will adding a pipe to my code cause a delay in the loading of components?

Visual Representation of Components without Using Pipes Showing a Delay of 1300 milliseconds Illustration of Components Utilizing Pipes with a Delay of 1400 milliseconds ...

angularrxjs

The Angular Button fails to display when all input conditions are met

I'm currently working on validating a form using this link. The requirement is simple - when an input field is invalid, the `save` button should be disabled. Conversely, when all input fields are valid, the `SAVE` button should be enabled/shown. The & ...

angularvalidationtypescripthtml-tableforms

What sets apart li.parent from ul?

I am facing some confusion with this parent keyword. Are li.parent and ul the same thing? If so, can someone please explain what this means? Thank you. (nav and sidebar are classes). .sidebar ul.nav .active > a:focus, .sidebar ul.nav li.parent a.active ...

csshtml-listsparent

What is the process for transforming binary code into a downloadable file format?

Upon receiving a binary response from the backend containing the filename and its corresponding download type, the following code snippet illustrates the data: 01 00 00 00 78 02 00 00 6c 02 00 00 91 16 a2 3d ....x...l....... 9d e3 a6 4d 8a 4b b4 38 77 bc b ...

javascriptangulartypescript

I am having trouble properly positioning an icon next to its corresponding text within a menu item

I'm a newcomer to the world of HTML5 + CSS3 and I'm having trouble with aligning menus, text, and icons within the menu. Here's the issue: Each line of the menu consists of an icon and a text description. The problem is that they are too clo ...

htmlcssweb

Top and bottom fieldset legends in Bootstrap 4

Looking for suggestions on how to include legend text on the bottom border in bootstrap 4. I attempted to use position and margin, but it didn't work. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.mi ...

htmlcssbootstrap-4

Can one utilize Javascript to write in plain text format?

Currently, using JavaScript I have a plain text containing data that is displayed within my form tags. Everything is functioning correctly, but now I need to update the values inside the code of my form tags in order for the changes to also be reflected in ...

javascriptjqueryhtmlcssdns

Using a pseudo-element after to center CSS content

Although there are numerous posts discussing this topic, my situation is unique. In my case, I have a collection of colors represented by circles. When I click on a circle, I add content in the form of a check mark by including a class selector with an af ...

htmlcssangularjs

Internet Explorer experiencing difficulties displaying elements

On occasion, my website (find-minecraft-servers.com) may appear distorted in Internet Explorer. Sometimes, the number under Servers Listed in the green-ish banner fails to display correctly, despite being present in the source code. This issue seems to be ...

htmlcssinternet-explorercompatibility

Chrome reports "404 Not Found error: Cannot GET /" while using Angular 4 with Observable functions

I recently implemented observable data in my service, and it significantly improved the functionality of the application. https://i.sstatic.net/9h0KH.jpg This is an overview of my Service: import { Injectable } from '@angular/core'; import { H ...

angularvisual-studio-codeangular2-servicesangular2-observables

Tips for setting up communication between UI and backend applications using Nginx reverse proxy in a Docker environment

We have an Angular UI application and a Java Spring Boot backend application. Our goal is to deploy them in Docker containers and establish seamless communication between the front-end and back-end without hard-coding URLs or other specifics. Everything ne ...

angularspring-bootdockernginxnginx-reverse-proxy

The navigation area is too small for the social media buttons to fit

Hi everyone, I'm encountering an issue with the social media buttons on my website. They're not staying in the navigation header area despite trying to use the float attribute. Here are some images illustrating the problem: https://i.stack.imgur ...

htmlcss

Tips for stacking objects vertically in mobile or tablet view using HTML and CSS

I have been diligently working on a project using a fiddle, and everything appears to be running smoothly in desktop view. The functionality is such that upon clicking any two product items (with one remaining selected by default), a detailed description ...

javascriptjqueryhtmlcssmedia-queries

Creating an Ionic 3 canvas using a provider

I recently followed a tutorial on integrating the canvas API into Ionic, which can be found at this link. However, I encountered an issue where all the canvas-related functions had to be placed within the pages class, making it quite cumbersome as these f ...

javascriptangulartypescriptionic3

Is there a way to adjust the container width to 1440px while also ensuring that the columns remain responsive with the help of Bootstrap 4 and SCSS?

Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...

cssbootstrap-4sassresponsive-designgrid

"Step-by-Step Guide: Displaying a New Component When a Table Row is

I am currently working with an API to populate a table within the router outlet, but I would like to know how I can load a different component that displays the details of a selected row. For example, if the table contains a list of equipment, I want to be ...

angulartypescriptangular8