I have the following HTML to display select locations and below that map will be displayed.
I have the following HTML for the above view,
<mat-form-field class="locationSelector">
<mat-select placeholder="Choose location" (ngModel)="ServiceLocations">
<mat-option *ngFor="let location of ServiceLocations" [value]="location" style="width:200px; background-color: red; font-size: 10px;">
{{ location.areaName }}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
</agm-map>
</div>
And corresponding CSS is ,
agm-map {
height: 300px;
position: relative;
}
.locationSelector {
width: 20%;
}
The view I am getting is,
And when I click on select options, I am getting a view as follows,
Please correct me where I am wrong.
All required material components are imported in app.module.ts
Import a theme in your global style.css file.
Related
As the headline says, I updated the version of IntelliJ and now the angular material selector ::ng-deep is showing me as deprecated.
Example:
<mat-form-field class="register-custom-select">
<mat-select formControlName="gender" required>
<mat-option class="register-custom-option" *ngFor="let gender of genders
[value]="gender.genderValue">
{{ gender.genderValue }}
</mat-option>
</mat-select>
</mat-form-field>
::ng-deep .register-custom-select .mat-form-field-underline {
background-color: #838383;
}
What do I need to change to make the selector no longer deprecated and still have the style?
For me using globale style resolve this
In your style.css yu can add
.register-custom-select .mat-form-field-underline {
background-color: #838383!important;
}
Using ::ng-deep it solve the problem, but it affect all mat-select in the same module, so how can I change mat-select style juste in a specific component?
::ng-deep .mat-select-panel{
max-height: none!important;
}
Edit:
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field >
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
You can do this then,
// Add an ID to the div in the HTML
<div class="col-md-2 kt-margin-bottom-10-mobile">
<div class="kt-form__control">
<mat-form-field id="search-option-id"> <-- Add the ID Here
<mat-select
[(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
placeholder="Search by..."
>
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
// In your CSS file, you can do this:
#search-option-id > mat-select { <-- You can do this in the CSS
::ng-deep .mat-select-panel {
max-height: none!important;
}
}
Actually, the mat-select-panel is outside your component, in the .cdk-overlay-container. So you can't change CSS only for your own component's mat-selects.
What you CAN do, is adding a class to the select-panel, and then make a true ng-deep rule
<mat-form-field>
<mat-select [(value)]="searchOption"
class="mat-form-field mat-form-field-fluid"
panelClass="auto-height" <-- adding class to panel here
placeholder="Search by...">
<mat-option value="all"><span>All</span></mat-option>
<mat-option value="ref"><span>Reference</span></mat-option>
<mat-option value="name"><span>Name</span></mat-option>
<mat-option value="team"><span>Team</span></mat-option>
</mat-select>
</mat-form-field>
and in your scss file:
::ng-deep .mat-select-panel.auto-height {
max-height: none;
}
Or even better, add it to your material-overload.scss file if you already have one. If not, add it to your styles.scss file, so you don't use ng-deep at all:
.cdk-overlay-container {
.mat-select-panel.auto-height {
max-height: none;
}
}
Im having an issue when I try to change the CSS of dropdown using mat-form-field of angular material in two things :
My CSS doesnt change the propertys <option> and <optgroup> .
cant change :hover CSS for <option>
the position ot the dropdown "cuts" the current selected option.
My dropdown style atm (default angular-material) :
drop-down-atm
The html :
<mat-form-field class="drop-down" appearance="fill">
<select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</option>
</optgroup>
</select>
</mat-form-field>
The style I wish to do :
the drop-down I need
Really need some help with that, If someone had this problem before :)
I believe native dropdowns are not style-able. You can try to use the material select and add your own classes to be able to style it
<mat-form-field appearance="fill" class="my-class">
<mat-select [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" [label]="mainModes.name">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
https://material.angular.io/components/select/overview
Edit: You may need to use the ::ng-deep selector to target the shadow elements that material generates.
Something like:
.mat-form-field ::ng-deep .mat-optgroup {
// styles
}
when you work with some material angular components you need declare the styles "globlally". You can include in your file "styles.sccs"
.mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
The reason is that some Angular components create the "popup" outsite our component. You can see it in a div called cdk-overlay-container. This components has a property panelClass that allow us only change the css of only this component. That's. In your styles.scss you replace the before .css by -I used "special", you use the word you want
.special .mat-optgroup-label {
color:black;
font-weight:600;
border-bottom:1px solid silver;
}
.special .mat-optgroup .mat-option:not(.mat-option-multiple) {
padding-left: 0!important;
}
.special .mat-option-text {
border-bottom:1px solid silver;
padding-left:32px;
}
And in your select
<mat-select panelClass="special" ...>
...
</mat-select>
In your code example, for the hover to work you must use the material elements and then in the css use the ::ng-deep, also verify that it does not have encapsulation set, in the component's .ts in the #Component.
In the html it would look like this:
<mat-form-field class="drop-down" appearance="fill">
<mat-select matNativeControl [(ngModel)]="currentActiveModeValue" (change)="onModeChange($event)">
<mat-optgroup *ngFor="let mainModes of activeModArry; let i = index" label="{{ mainModes.name }}">
<mat-option *ngFor="let subModes of mainModes.childModes" [value]="subModes.id">
{{ subModes.name }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
and the css would be like this
::ng-deep mat-option:hover {
...
}
The current drop-down box has width greater than the the width of the line:
Is there a way to get rid of the extra width?
Here is my current code:
html:
<mat-form-field>
<mat-select disableOptionCentering placeholder="Choose an option">
<mat-option [value]="option" *ngFor="let option of my_list">
{{ option }}
</mat-option>
</mat-select>
</mat-form-field>
my_list:
export const my_list: string[] = [ "a", "b", "c", "d"];
style.css:
.mat-select-panel{
margin-left: 15px;
margin-top: 28px;
}
For anyone still trying to figure out without making the actual select smaller or wider.
The mat-select-panel uses 100% of the mat-select width plus 32px
min-width: calc(100% + 32px)
You can override this styling with ng-deep:
::ng-deep .mat-select-panel {
min-width: 100% !important;
}
Try this and change width:
<mat-select style="width:10px">
Try this
.mat-select-panel:not([class*=mat-elevation-z]){
min-width: calc(100% + 0px) !important; }
set width at mat-form-field tag level.
try this,
<mat-form-field style="width:50px">
\add class to mat-form-field tag
\and write style to that class
.input-container {
width: 100%;
\\ enter code here
}
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.
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;
}