p-dropdown doesn't fit correctly in a p-inputgroup

[john8329]

I'm submitting a ... (check one with "x")

[x] bug report 

Plunkr Case (Bug Reports) https://github-jltrhy-tmo8hc.stackblitz.io

Current behavior As you can see the inputgroup doesn't grow well when using a p-dropdown. It should behave as in theory. I can't even see a demo of this in the documentation, perhaps it hasn't been considered.

The borders are wrong on the left and sometimes even the height has issues. I had to implement some library-wide fixes in my code to make it work.

• Angular version: 10.2

• PrimeNG version: 10.0.6 LTS

Also I should reference this issue, seems related.

[john8329]

Also I wanna share a dirty workaround applied as a global style to fix this thing. Took me a while to figure out.

.p-inputgroup > p-dropdown {
  display: grid;
  flex: 1 1 auto;
  width: 1%;

  .p-dropdown {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}

.p-inputgroup p-dropdown:not(:last-child) .p-dropdown {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p-inputgroup p-dropdown:not(:first-child) .p-dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

[flkeller]

in addition here is a solution including FloatLabel:

.p-inputgroup {
  .p-float-label{
      &:not(:last-child){
          .p-dropdown {
              border-right: 0;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
          }
      }
      &:not(:first-child){
          .p-dropdown {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
          }
      }
  }
  p-dropdown {
      display: grid;
      flex: 1 1 auto;
      width: 1%;
  
      .p-dropdown {
          height: 100%;
          width: 100%;
          overflow: hidden;
      }
  
      &:not(:last-child){
          .p-dropdown {
              border-right: 0;
              border-top-right-radius: 0;
              border-bottom-right-radius: 0;
          }
      }
      &:not(:first-child){
          .p-dropdown {
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
          }
      }
  }
}

[sserje06]

Also I wanna share a dirty workaround applied as a global style to fix this thing. Took me a while to figure out.

.p-inputgroup > p-dropdown {
  display: grid;
  flex: 1 1 auto;
  width: 1%;

  .p-dropdown {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
}

.p-inputgroup p-dropdown:not(:last-child) .p-dropdown {
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.p-inputgroup p-dropdown:not(:first-child) .p-dropdown {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

Well I tried this and doesn't worked :( But I found where the problem is, here is the solution:

Problem: When it comes to using the p-dropdown with a p-inputgroup to add any button or icon to the dropdown, it loses the width and completely covers the value that should be displayed

HTML Code Example:

              <div class="p-inputgroup">
                <span class="p-float-label">
                  <p-dropdown
                              [id]="question.Key"
                              (onChange)="reloadForm(question)"
                              [options]="question.Options"
                              optionLabel="Value" 
                              optionValue="Guid"
                              [showClear]="false"
                              [autoDisplayFirst]="false"
                              [formControlName]="question.Key"
                              required>                    
                  </p-dropdown>
                  <label>{{question.Label}}</label>  
                </span>
                <button type="button" pButton pRipple icon="pi pi-times" pTooltip="Remove" styleClass="p-button-danger" (click)="removeProductFeature(question.Guid)"></button>
              </div>

Temporal Solution: Basically is a problem of the primeng.css and primeng.min.css (C:\project-folder\node_modules\primeng\resources) files in the rule:

.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-inputgroup .p-inputwrapper > .p-component {
    flex: 1 1 auto;
    width: 1%;
}

The solution is change the with:1% by with:100% in both files, then save the changes and reload your application, after that you can see the dropdown working well:

@cagataycivici @yigitfindikli I tested this in version 12.2.2 and it would be great if they could apply it in the next 13x version... since this is a problem that has been around for a long time.

[nblum]

For me a simple solution like this works:

.p-inputgroup p-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
}

[sserje06]

For me a simple solution like this works:

.p-inputgroup p-dropdown {
  display: flex;
  align-items: center;
  justify-content: center;
}

Hello @nblum I tried your solution and it works perfectly, my solution would solve the root problem and your solution is fast and effective while they fix the problem :)

[pasevin]

Any updates on this guys?

[diegoarantes]

I have the same problem reported :(

[mertsincan]

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you reopen the issue so we can include it in our roadmap? Please don't forget to add your feedback as a comment after reopening the issue. These will be taken into account by us and will contribute to the development of this feature. Thanks a lot for your understanding!

Best Regards,

[john8329]

I'm sorry, but the bug hasn't been solved. For your convenience, I've created a stackblitz showing it's present even in the current latest release.

https://stackblitz.com/edit/primeng-inputgroup-demo-d9vyvn

[RtCryo]

<div class="p-inputgroup">
	<span class="p-inputgroup-addon"><i class="pi pi-user"></i></span>
	<p-dropdown [options]="options" [(ngModel)]="option" optionLabel="name"></p-dropdown>
</div>

.p-inputgroup p-dropdown {
    display: flex;
    align-items: center;
    justify-content: center;
}

:host >>> .p-inputgroup > .p-inputwrapper:last-child > .p-component {
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
}

"primeng": "^15.0.0-rc.1"

[john8329]

Yeah I did a similar fix too. This issue is more towards "please make it officially supported with an example".

[ProfEibe]

this fix is needed for all the input-components. i.e. autocomplete needs it too. with

.p-inputgroup p-autocomplete {
  display: flex;
  align-items: center;
  justify-content: center;
}

it is fixed

[ArteLuke]

Any updates on this?

[David-Ben-Mesecke]

This is how I fixed it, forced the issue with the w-19rem style rule, enforcing a static width of the controls container

    <div class="field w-19rem md:pr-4">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon bg-primary">
          <i [class]="selectedIcon"></i>
        </span>
        <p-dropdown id="label" class="flex flex-auto" formControlName="label"
          placeholder="{{ 'type.placeholder' | translate }}"
          [options]="contactTypes" optionLabel="label" optionValue="label"
          appendTo="body" (onChange)="onTypeChange($event)">
          <ng-template let-option pTemplate="item">
            <i [class]="option.icon"></i>
            {{ option.label }}
          </ng-template>
        </p-dropdown>
      </div>
    </div>

[Et3rnal]

I have multiple p-dropdown with a button at the end, none of the provided solutions give the right group styling. Also, (maybe a different issue) the grouping doesn't work nicely with outlined buttons

[LouLeGrain]

Just stumbled upon this problem, i have another workaround without custom css (only using primeflex classes). Basically it consists of recreating a p-inputgroup without using p-inputgroup... With the other solutions i had some trouble with p-float-label.

https://stackblitz.com/edit/github-iql5cb?file=src%2Fapp%2Fapp.component.html

The thing here is the use of a flex container (p-field flex col-12), and setting the class flex-1 for the p-float-label div that contains the dropdown. Then add some styling to the borders to blend themselves (styleClass="border-noround-right border-right-none" and styleClass="border-noround-left")

<div class="p-fluid grid">
  <div class="p-field flex col-12 md:col-6 my-2">
    <div class="p-float-label flex-1">
      <p-dropdown
          [showClear]="true"
          styleClass="border-noround-right border-right-none"
          placeholder="Select a thing"
          id="thing"
          dataKey="id"
          [options]="options"
          optionLabel="name">
      </p-dropdown>
      <label for="thing">thing</label>
    </div>
    <p-button
      type="button"
      icon="pi pi-plus"
      styleClass="p-button-outlined border-noround-left"
      label="New thing">
    </p-button>
  </div>
</div>

[acharugulla]

If you need to implement dropdown along with input field you can set editable to true example: <p-dropdown [options]="cities" [editable]="true" >