search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.38k stars 6.75k forks source link

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

Open sanjeevgt opened 3 years ago

sanjeevgt commented 3 years ago

I have referred the link https://github.com/angular/components/issues/11773 to resolve my issue. panelWidth="auto" is working fine in Chrome and Edge bot not for Firefox and IE

image

crisbeto commented 3 years ago

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 commented 3 years ago

Hi crisbeto

I have the same scenario like this link https://github.com/angular/components/issues/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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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