DropDown overlaps margin

1
votes

I have a problem with DropDown in Angular & Primeng. The DropDown with "style=width:100%" overlaps the border by selected large text. The width size of then control should not depend on the text length.

An example can find at https://stackblitz.com/edit/github-vur22c-cwrvzc

Have somebody a workaround?

enter image description here

2
angularprimengprimeng-dropdowns
Does this answer your question? primeNG p-dropdown stretch 100% – Kiran Mistry

2 Answers

0
votes

p-dropdown component has style property use that to set p-dropdown width.

Try this:

<h3>Test</h3>
<div style="width: 250px; height: 100px; padding: 20px; background-color: red">
  <p-dropdown [style]="{'width':'100%'}" [options]="options1" [(ngModel)]="selected1"></p-dropdown>
</div>

Example

0
votes

The width size of then control should not depend on the text length.

This should do the trick. Set on first div (the dropdown itself):

p-dropdown > div

or 

 p-dropdown .ui-dropdown

its the same selector, its up to you which one to use :))

this css properties:

position: relative;
width: 100%;

p-dropdown is more like a directive/component and everything inside it is the elements that you are looking for.