CODEWITHSUNDEEP
cssangulartypescriptangular-material
pierre
pierre

Reputation: 933

Change style of material component doesn't work

Hello, I use Angular 5 and material for my project, i'm trying to change the width of the autocomplete panel, with the exemple, i can now display the options corretly, but i cannot see all the informations for the options, then i modified the css file of the new component, but it doesn't work for the material component, can someone tell me how to do it, please?

This is the html of the component:

<mat-expansion-panel [expanded]="panelOpenState === true">
      <mat-expansion-panel-header>
        <mat-panel-title>
          Critère de recherche
        </mat-panel-title>
        <mat-panel-description>
          Saisir un numéro de procédure
        </mat-panel-description>
      </mat-expansion-panel-header>

      <mat-form-field>
        <input id="autocomplete" type="text" matInput placeholder="number" [ngControl]="inputControl"  
                [(ngModel)]="searchValue" [matAutocomplete]="auto" (keyup)="onChange()">
        <mat-autocomplete #auto="matAutocomplete" class="class1">
          <mat-option *ngFor="let procedure of filteredProcedures | async" [value]="procedure.procedureId">
            <span>{{procedure.procedureId}} | </span>
            <small>{{procedure.firstName}} </small>
            <small>{{procedure.lastName}}</small>
            <small>{{procedure.userId}}</small>
          </mat-option>
        </mat-autocomplete>
      </mat-form-field>
      <button class="pull-right btn btn-info" (click)="search()">
        <span matTooltip="Chercher une procédure">
          <i class="fa fa-search"></i> Chercher </span>
      </button>
    </mat-expansion-panel>

And the css file:

.mat-button {
    color: white
}

#autocomplete {
    width: 400px, !important;
}
.class1 {
    width: 400px, !important;
}

.cdk-overlay-pane {
    width: 400px;
}

I have tried also to use :host, but it doesn't work.

:host ::ng-deep mat-autocomplete-panel(class1) {
   width : 400px;
}

Can you tell me where is the error, please?

I want to display all/more informations of the options.

In fact, with the css file, the button style is applied correctly. but it doesn't work for the autocomplete panel, why?

Thank you.

Upvotes: 0

Views: 805

Answers (1)

Nathaniel Flick
Nathaniel Flick

Reputation: 2963

Remove the commas from your css (then the width works) and you can't use :host as a pseudo since it's not a pseudo element. Pseudos list here: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

#autocomplete {
        width: 400px !important;
    }
    .class1 {
        width: 400px !important;
    }

Upvotes: 1

Related Questions