Looking to boost the height of ngSelect options?

Need help with adjusting the dropdown height for the ng-select form image. Currently, it is only displaying 5 items and I would like it to show 8-10 items. Below is the code I am using:

<form [formGroup]="addReportForm" class="form-horizontal col-xs-12" method="post" novalidate="novalidate" style="width: 100%;">
  <div class="form-group">
    <label for="adb-name">Name</label>
    <input  id="adb-name" class="form-control text-16-normal" type="text" placeholder="Name" formControlName="name">
  </div>
  <div class="form-group">
    <label for="adb-report">Type</label>
    <ng-select
      id="adb-report"
      [items]="allReports"
      [multiple]="false"
      [closeOnSelect]="true"
      [searchable]="true"
      bindLabel="name"
      bindValue="id"
      formControlName="vizType"
      placeholder="Select Report"
      (change)="onChange($event)"
      [(ngModel)]="reportName"
    >
    </ng-select>
  </div>
  <app-alert></app-alert>
</form>

Answer №1

For optimal results, make sure to utilize /deep/ when modifying a specific component.

/deep/ .ng-dropdown-panel .ng-dropdown-panel-items {
max-height: 500px;   }

Answer №2

To make the height taller, use css:

.ng-dropdown-panel .ng-dropdown-panel-items {
    max-height: 500px !important;
}

The initial max-height for ng-select is set to 240px

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

Run JavaScript code whenever the table is modified

I have a dynamic table that loads data asynchronously, and I am looking for a way to trigger a function every time the content of the table changes - whether it's new data being added or modifications to existing data. Is there a method to achieve th ...

How come characteristics of one particular div element are transferring to unrelated div elements?

Recently, I created a small practice website and encountered an issue that is quite frustrating. Here's the div structure I used: <div class="work-process"> <div class="container" align="center"> <div class="col- ...

Experiencing Problems with Firefox Height?

Check out my current project on Codepen - it's a clock: http://codepen.io/www139/pen/MaxGyW Here's what it's supposed to look like: https://i.sstatic.net/tOMKh.png If you're using FireFox, you might notice that it looks different comp ...

Updating the alignment between two input mat-select in Angular materialAlternatively:Fine-tuning the reference between

I am currently working on an Angular 6 app: I have two mat-select inputs that I want to connect in a way that if the selected option in my First select is equal to the value 'AAA', then the Second select should be hidden. First Mat-Select -> ...

Integrating dynamic transition effects using Jquery Mobile for <div> elements

Just a friendly reminder, I must admit that my knowledge of Javascript is quite limited. I received a script from Padilicious to implement swipe navigation on my Jquery Mobile Site. It involves adding functions to a div tag like this: <div data-ro ...

Develop a simulated version that does not include all the functionalities of the primary service

Let's imagine a scenario where there is an OriginalService class with various methods class OriginalService { method1() { } method2() { } method3() { } .. } Now, suppose we need to create a mock of OriginalService that will only be used with ...

What techniques can I implement using JavaScript or CSS to create a slightly transparent effect on my text?

I am currently developing a website that features changing background images. I am looking to have the text on the site mimic the color of the backgrounds, but not so much that it becomes difficult to read. How can I make the text transparent in this man ...

SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example: svg { fill: currentColor; } <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px"> < ...

What is the best solution for setting up a div containing a table with images inside?

I'm looking to achieve the following: <div id="display"> <div id="slideshow1"> <table cellspacing=0><tr><td style="height:200px;padding:0;vertical-align:middle"> <img ... /> </td></tr> ...

Center-align the table element

I've been struggling to center align this table element, specifically the one containing the square, but nothing seems to be working. Can anyone lend a hand in fixing this issue? <table> <tbody> <tr> <td>TURKEY - SU ...

Clicking on a React component will result in highlighting

What's the best way to display the selected item after a user clicks on it? <Box py={2}> <Grid container width="330px"> <Grid container direction="column" item xs align="left"> ...

Avoiding text from overflowing a DIV when the parent DIV's width is specified as a percentage

After extensively searching through over 20 similar posts, I have not been able to find a solution that works for my specific issue. The layout of some content I'm working with resembles the example provided here: Check out the Fiddle Example In th ...

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

What is the best way to eliminate the option for editing the profile on the front end of

Is it possible to remove or hide the "edit profile" link on the frontend of Joomla (version 2.5.6) once I am logged in on the site? Thank you ...

What could be the reason my component is not displaying the ContentChild associated with a directive?

It appears that utilizing a directive to target a content child from another directive is the recommended approach (source). However, why isn't my component able to recognize the component marked with the directive? ./my.component.ts import { Comp ...

Angular sending data to ASP.NET MVC results in null object properties

My issue involves sending data from Angular (v15) to ASP.NET on the .NET Framework 4.72. On the client side: var name = this.inName; var queue = new Queue(); queue.QueueId = 6; queue.CustomerFullName = name; queue.Status = 5; var d = new Date(); const da ...

"Effortlessly create a disappearing effect for your Bootstrap modal: Fade in upon opening, and instantly

When it comes to Bootstrap 3 modals, I have a question regarding the fade effect. On my outer modal div, I am using class="modal fade" to achieve the default fade in/out effect. However, what I really want is for the modal to fade in when opened, but disap ...

Error encountered with the item properties in vue-simple-calendar 'classes'

For my Vue.js project, I am utilizing the npm calendar package called `vue-simple-calendar` and aiming to implement dynamic classes for each event item like background-color, etc. However, the `classes` property doesn't seem to be functioning as expec ...

Split the form into separate pages or views using Angular

We are tasked with creating a single page application using the latest Angular 6 technology for an insurance company. The form consists of 9 questions, and the client has requested that only one question be displayed on the screen at a time. Upon clicking ...

"An issue was found on line 75, with column 16 reporting an error stating: AttValue expected either a double or single quote

I can't seem to figure out what's wrong with the first line: <a xlink:href=“#dccomics” xlink:title=“DC Comics”> <rect x="1023.509" y="-612.968" fill="none" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" width ...