Override dropdown/overlay width in autocomplete, select and other components panelWidth="auto" do not have the same behavior in Firefox and IE

[sanjeevgt]

I have referred the link #11773 to resolve my issue.
panelWidth="auto" is working fine in Chrome and Edge bot not for Firefox and IE

[crisbeto]

I just tried it out and it worked on Firefox and Chrome. Can you post what your code looks like? Otherwise there's not enough information to investigate.

[sanjeevgt]

Hi crisbeto

I have the same scenario like this link #11773. I have used [panelWidth]="'auto'" on html page. <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayOptionAs" [panelWidth]="'auto'">
intending to set width dynamically
it works fine in Chrome and Edge but not in Firefox.
Due to security reason unable to post code.
attached screenshot above

[crisbeto]

How are you setting the width? When you set panelWidth="auto", Material will set an inline style of style="width: auto" on the element so it's possible that your value is being overwritten.

[sanjeevgt]

Yes when it is rendering it looks like
div id="cdk-overlay-0" class="cdk-overlay-pane" style="width: auto; top: 110.383px; left: 472px;">

<mat-option _ngcontent-wcj-c292="" role="option" class="mat-option mat-focus-indicator ng-star-inserted" ng-reflect-value="[object Object]" id="mat-option-19409" tabindex="0" aria-disabled="false"
possible that your value is being overwritten: it could be but the same thing is working Chrome and Edge
Could you please provide any suggestion/solution/way to in order to work in Firefox and IE?
Issue reported on stack overflow : https://stackoverflow.com/questions/63529665/angular-material-autocomplete-multiple-words-selection-with-text-overflow-issue

[sanjeevgt]

Hi @crisbeto
Could you please guide me. Is my question is valid or not?
Thanks,
Sanjeev

[mmalerba]

I'm closing this issue since we have been unable to reproduce this and no stackblitz was provided.