question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Adjust the size of the dropdown menu

See original GitHub issue

Describe the bug I´d like to adjust the width of dropdown. The dropdown menu has the same width of his parent.

Reproducbile example

       <ng-select id="ProductAttributeValue"
          class="isRequired"
          [items]="attributeValueNames"
          [selectOnTab]="true"
          bindLabel="AttributeValueName"
          dropdownPosition="auto"
          labelForId="ProductAttributeValue"
          placeholder="Search a Value"
          [virtualScroll]="true"
          formControlName="ProductAttributeValue">
          <ng-template ng-option-tmp let-item="item" let-search="searchTerm">
            <div><span [ngOptionHighlight]="search">{{ item.AttributeValueName }}</span></div>
          </ng-template>
        </ng-select>

Expected behavior image

Screenshots If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Windows
  • Browser Chrome
  • Version 70

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
gvsharmacommented, Dec 17, 2019

How did you restrict the height to only 5 items?

1reaction
diciaupcommented, Jan 24, 2019

I’ve add ng-select { .ng-dropdown-panel { width: auto !important; max-width: 550px; } } to my styles.scss and it works

Read more comments on GitHub >

github_iconTop Results From Across the Web

html - How can change width of dropdown list? - Stack Overflow
Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it...
Read more >
How to Change Drop-down Width and Font Size in Excel
You can adjust the column manually by dragging the border of the column header. If you want to auto-fit the column, however, you...
Read more >
How to style and adjust the width of the dropdown menu in ...
First you need to create a dropdown menu. Then you can add this CSS for the styling. place the CSS code in Theme...
Read more >
How to adjust the width of a HTML combobox (Drop down box ...
How to adjust the width of a HTML combobox (Drop down box or Select box) · You can use external CSS (Cascading Style...
Read more >
How to change type size in drop down menus?
You can change the type Font and Size in new Edge as shown here: https://www.windowscentral.com/how-change-defau... https://www.ghacks.net/2020/ ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found