Adjust the size of the dropdown menu
See original GitHub issueDescribe 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
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:
- Created 5 years ago
- Reactions:1
- Comments:12 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
How did you restrict the height to only 5 items?
I’ve add
ng-select { .ng-dropdown-panel { width: auto !important; max-width: 550px; } }
to my styles.scss and it works