Components: Autocomplete Panel width

Created on 20 Feb 2017 · 3Comments · Source: angular/components

Bug, feature request, or proposal:

A Way to set the panel width in autocomplete

What is the expected behavior?

The panel width could have a property to change the panel-width.

What is the current behavior?

The panel width isn't wide enough, so the content doesn't fit in it. My project is hosted in heroku, so it compiles the project remotely and donwload the material autocomplete code also remotely (so I can't customize de component scss)

What are the steps to reproduce?

Just modify the example of the material.angular.io, changing the width of to 100% and modify one of the states name to a longer name.

Plunker Link: https://plnkr.co/edit/nKgx04MYK0q0xhS1yfAZ?p=preview

In plunker, just click on the input to see that the panel is too short to show the first name, even if there's a lot of space in the window.

Which versions of Angular, Material, OS, browsers are affected?

@angular/cli: 1.0.0-beta.32.3 [1.0.0-beta.30]
node: 6.9.5
os: win32 x64
@angular/cli: 1.0.0-beta.32.3
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/flex-layout: 2.0.0-beta.5
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/material: 2.0.0-beta.2
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8

Is there anything else we should know?

I'm currently setting the encapsulation to None in the host component to fix it, but I don't know if this is the recommended way to make the things right.

P3 help wanted

Source

julianobrasil

👍4

Most helpful comment

@julianobrasil for now, you could add this to your global stylesheet

.mat-autocomplete-panel {
  max-width: none !important;
}

The problem seems to be that the autocomplete is including styles from the menu, which has a max-width

// autocomplete.scss
.mat-autocomplete-panel {
  @include mat-menu-base();
  ...
}

// _menu-common.scss
@mixin mat-menu-base() {
  @include mat-elevation(8);
  min-width: $mat-menu-overlay-min-width;
  max-width: $mat-menu-overlay-max-width; // is 280px
  ...
}

willshowell on 20 Feb 2017

👍5

All 3 comments

@julianobrasil for now, you could add this to your global stylesheet

.mat-autocomplete-panel {
  max-width: none !important;
}

The problem seems to be that the autocomplete is including styles from the menu, which has a max-width

// autocomplete.scss
.mat-autocomplete-panel {
  @include mat-menu-base();
  ...
}

// _menu-common.scss
@mixin mat-menu-base() {
  @include mat-elevation(8);
  min-width: $mat-menu-overlay-min-width;
  max-width: $mat-menu-overlay-max-width; // is 280px
  ...
}

willshowell on 20 Feb 2017

👍5

@willshowell, thanks for the reply. I'll do as you said for now and wait for the next beta.

julianobrasil on 24 Feb 2017

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}