Remove multiselect label in PrimeNG

I am attempting to change the multiselect label of selected items and replace it with a static default label.

Here is what it currently shows: https://i.sstatic.net/qBNHG.png

This is what I have tried:

    .p-multiselect-label {
    visibility: collapse;
    overflow: hidden;
    white-space: nowrap;
  }

While this code successfully removes any selected labels, the white space increases as more labels are selected. Additionally, I am unable to add the default label when there are already selected items.

This is what I desire: https://i.sstatic.net/8swht.png

javascriptcssangularfrontendprimeng

Answer №1

To modify the appearance of the chosen items, you can customize the selected items template:

<p-multiSelect #multiSelect defaultLabel="Choose a city">
  <ng-template pTemplate="selectedItems">
    {{ multiSelect.defaultLabel }}
  </ng-template>
</p-multiSelect>

View Demo on StackBlitz

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

Exploring Angular Components with Jasmine and Karma while integrating third-party tools such as ExcelJS

Currently tackling the challenge of writing tests for a project using ExcelJS. The project runs smoothly in both build and production environments, but when attempting to incorporate unit tests for certain components, I'm encountering issues with Test ...

angularunit-testingexceljs

Adjust the transparency of CSS elements using a jQuery selector

I am developing a grid of brand thumbnails with interactive icons. When one of the icons is hovered, I want all the icons to change opacity and become visible. Here is the current HTML structure: <div id="brands-wrapper"> <img class="brands" ...

jquerycssopacity

Using Material UI with Reactjs for Background Image Mapping

I need some advice from everyone. I have an array of images and I've mapped the content, but for some reason I am unable to set a background image in the styles of a component. The other objects in the array are working as expected. {DlCards.map((mdlc ...

javascriptreactjsmaterial-uibackground-image

utilizing vue model attributes with `${}`

I am encountering an issue with my code. Initially, :src="labels[index]" was working fine for me. However, as my codebase expanded, I needed to use ${app.labels[index]}. Simply using ${app.labels} works, but the addition of [index] causes it to b ...

javascriptvue.js

Utilize *ngIf to conceal a row within a material table

I'm struggling with hiding a row after clicking a button in the mat-table. I can't figure out where to place the *ngIf directive. I attempted using it on ng-container, but it didn't work as expected. Below is the excerpt from my HTML file. ...

angularmat-table

Raise the image above the wrapping div, positioning it at the very bottom

I'm struggling to position an image within a div in a way where: it protrudes above the div it begins at the very bottom of the div (with a small gap that I can't eliminate) Below is the relevant HTML code snippet: <div class="teaser-imag ...

cssimage

Transferring information between components, specifically when one of them is a routerOutlet within an Angular application

I need to transfer data from the category component to the product component within the dashboard component. However, I am facing an issue due to the presence of a router outlet inside the product component. View Dashboard Screen dashboard.component.html ...

angulartypescriptparameter-passingwebapirouter-outlet

distance between the top of the window and divs within an array

I'm having trouble calculating the distance of divs within an array from the top of the window. Whenever I try to run the code, I keep getting an error message saying "player.offset is not a function". Can someone please point out where I am making a ...

javascriptjquery

The Protractor actions().mouseMove function does not seem to function properly in Firefox and IE, although it works perfectly in Chrome

I've encountered an issue with the mouseMove command while using the actions class. The error occurs specifically when running the script on Firefox and IE, but works fine on Chrome. Below is the code snippet I attempted: browser.get("https://cherch ...

javascriptseleniumprotractorbrowser-automation

The 'filter' property is not found on the 'Observable<>' type

enter your code here... searchHospitals(term: string = null): Observable<Hospitals[]> { let hospitalsList = this.getHospitalsData(); if (term) { hospitalsList = hospitalsList.filter(hospital => hospital.name.toLocaleLowerCase() ...

angularrxjsangular6rxjs6angular-ngselect

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

"Creating Rounded Corners in HTML: A Step-by-Step Guide

Is there a way to round the corners of this image? Below is an excerpt from my body... <body> <h1 style="float:left; width:37%;"><font color="#99CC00"><font face="Verdana">MrEpicGaming4U</font></h1> <div style= ...

htmlcssimageborder

The function .innerHTML is not functioning correctly, at least in my opinion

When I utilize .innerHTML to insert text into a textarea, the script stops functioning if I manually begin editing the text in the textarea. Here is the code snippet: (function($){ addPort = function(name) { switch(name) { case 'name1': ...

javascripthtml

Compile time error due to TypeScript enumeration equality issue

Currently, I am developing a system to manage user roles within my website using TypeScript enumeration. This will allow me to restrict access to certain parts of the site based on the user's role. The primary challenge I am facing is comparing the u ...

angulartypescriptenums

Dynamic form controls within Angular are constantly changing and adapting

On my preference screen, users can sign up for various services that are received from a service provider. The Json data structure looks something like this: [ { category : 'General', source : [ { name: 'ABC News', ...

angular

Working with jQuery.ajax Function Calls in Array Filter Operations with Javascript

My knowledge of AJAX calls is limited, so I am unsure about how they interact with array filtering using A.filter(). The array in question is used to populate a template synchronously. // An event triggers a function to filter a list on the page. // The f ...

javascriptajaxfilter

Transitioning JavaScript plugins to Vue framework

Recently, I've been transitioning my PHP app to Vue 3 in order to enhance the interactivity of the site. In the past, we utilized JS plugins that were triggered by selectors to carry out various tasks like generating forms and loading videos. However ...

javascriptphpvue.jsvuejs2

Determining when a text area has selected text without constant checking

class MarkdownEditor extends React.Component { constructor(props) { super(props); this.timer = null; this.startIndex = null; this.endIndex = null; } componentDidMount() { this.timer = setInterval(() => { this.setSelectio ...

javascriptreactjs

Looking to save a CSS element as a variable

I am working on improving the readability of my code in Protractor. My goal is to assign a CSS class to a variable and then use that variable within a click method. element.all(by.css("div[ng-click=\"setLocation('report_road')\"]")).cl ...

javascriptcssangularjsprotractor

Detecting changes in Angular2 through a commonly shared service

I have a parent function called ngOnInit() that retrieves value from Google Maps as shown below: instance.input = document.getElementById('google_places_ac'); autocomplete = new google.maps.places.Autocomplete(instance.input, { types: [& ...

angularangular2-changedetection