Am using angular-material mat-select inside a fixed width div. On select, the dropdown appears to overflow the div. Please help in fixing this.
<div class="col-6">
<mat-form-field>
<mat-select #chooseGroupSelect [formControl]="choosenGroupControl" (selectionChange)="onChange($event.value)">
<mat-option *ngFor="let group of groups" [value]="group.gid">
<span i18n>{{group.name}}</span>
</mat-option>
<mat-option [value]="'newGroup'">
<small i18n>
<i class="fa fa-plus"></i>
New Group
</small>
</mat-option>
</mat-select>
</mat-form-field>
</div>
Related
I'm new in ionic angular, so I have a table where I use a select as:
<ion-row>
<ion-col size="3">
<mat-form-field appearance="fill">
<mat-label>Per page</mat-label>
<select matNativeControl [(ngModel)]="perPage" (ngModelChange)="setPerPage($event)" name="perPage">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
</mat-form-field>
</ion-col>
</ion-row>
So it shows something like:
As you can see it has an arrow down. I want this same arrow on input, my current input:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<input #clientInput (keyup)="(0)" [matAutocomplete]="auto" [formControl]="company" matInput [(ngModel)]="selectedCompany"/>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='loadContacts($event.option.value)'>
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</ion-col>
Is it possible to change the input for select in order to show arrow-down?
As Chiranjaya Denuwan comment bellow I changed it to:
<ion-col size="4" class="ion-text-left">
<p class="filter__title">Company</p>
<mat-form-field class="mat-form-control form_control-adjust">
<mat-select class="custom-dropdown">
<mat-option (onSelectionChange)="(clientInput.value != undefined)" *ngFor="let client of clientsFiltered | async" [value]="client">
<table class="autocomplete-table">
<tr>
<td class="text-crol" style="width: 20px">
{{ client.name }}
</td>
</tr>
</table>
</mat-option>
</mat-select>
</mat-form-field>
It is showing as I want, problem is not changing table on selection change, I think is because I missing <mat-autocomplete> that I have on my original input, but when I try to add, it just does not load any option in select
Here you can use Angular material select.
input a class attribute into the mat-select
<mat-form-field appearance="fill">
<mat-label>Favorite food</mat-label>
<mat-select class="custom-dropdown">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
then CSS ,
.custom-dropdown ::ng-deep.mat-select-arrow-wrapper {
visibility: hidden;
}
I can't write in input inside the expansion-panel, the focus is removed once I click on the input.
here is it my code!
<ng-container *ngFor="let i of listSousCategorie">
<mat-expansion-panel class="childPanel" [expanded]="true" hideToggle disabled style=" background:#ecfaff;">
<div class="childPanel_body2 mat-badge-large" fxLayout="row" fxFlex fxLayoutAlign="start center" >
<div style="padding-left:1em" fxFlex="grow" >{{i.libelle}}</div>
<mat-form-field style="width:50px" appearance="standard" [formGroup]="form">
<mat-label>Note</mat-label>
<input type="text" matInput formControlName="Note" " >
</mat-form-field>
</div>
</mat-expansion-panel>
</ng-container>
Ive used a mat-card,inside that ive used mat-card-title and a form with 4 to 5 controls,mat-card layout is not visible on deployment in the browser,but mat-card title is displaying,Ive posted the form content and controls inside the mat-card-content only
Here is the template code,
<mat-card id="card" style="text-align: center;">
<mat-card-title>Details</mat-card-title>
<mat-card-content>
<form [formGroup] = "activityPlannerService.form" class="normal-form" (submit) = "onSubmit()">
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value = "{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value = "{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value = "{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value = "{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click) = "onClear()">Clear</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
</mat-card-content>
</mat-card>
Here is the image of the browser output window,
I know i just made a minor mistake,im a new learner,please correct me,Thanks in advance:-)
Please try using the following line of code .
<mat-card>
<mat-card-header>
<mat-card-title>Details</mat-card-title>
</mat-card-header>
<form [formGroup]="activityPlannerService.form" class="normal-form" (submit)="onSubmit()">
<mat-card-content>
<mat-grid-list cols="2" rowHeight="400px">
<mat-grid-tile>
<div class="controlers-container">
<input type="hidden" formControlName="$key">
<mat-form-field>
<mat-select formControlName="releaseName" placeholder="Release Name *">
<mat-option>None</mat-option>
<ng-container *ngFor="let release of releaseArray">
<mat-option value="{{release.label}}">{{release.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="sprintName" placeholder="Sprint Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let sprint of sprintArray">
<mat-option value="{{sprint.label}}">{{sprint.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="userName" placeholder="User Name *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let user of userArray">
<mat-option value="{{user.label}}">{{user.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select formControlName="activity" placeholder="Activities *" multiple>
<mat-option>None</mat-option>
<ng-container *ngFor="let activity of activitiesArray">
<mat-option value="{{activity.label}}">{{activity.value}}</mat-option>
</ng-container>
</mat-select>
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
<mat-form-field>
<input formControlName="plannedEffort" matInput placeholder="Planned Efforts">
<mat-error>This field is mandatory</mat-error>
</mat-form-field>
</div>
</mat-grid-tile>
</mat-grid-list>
</mat-card-content>
<mat-card-actions>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" [disabled]="activityPlannerService.form.invalid">Submit</button>
<button mat-raised-button color="warn" (click)="onClear()">Clear</button>
</div>
</mat-card-actions>
</form>
</mat-card>
What i am trying to do here is display input boxes for each of the people using ngFor. However this only lets me make selection from the first input box and when i make the selection it automatically updates the remaining inputs with the same value. Can anyone help me understand what i could be doing wrong here and i would like to be able to update the values for each person from the people array individually
<table>
<tr>
<td class="detailS">Hours</td>
<td style="width: auto" nowrap class="opt">
<mat-list>
<mat-list-item class="item"
*ngFor="let member of people.value; let i = index">
<div style="margin-left: 50px" nowrap>Start</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input matInput [matAutocomplete]="startAuto"
formControlName="start" (click)="onChooseStart()"
required="true">
<mat-autocomplete #startAuto="matAutocomplete"
(optionSelected)="onStartSelected($event)">
<mat-option *ngFor="let time of filteredStart | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{start?.value}}
</div>
<div style="margin-left: 50px" nowrap>End</div>
<div style="margin-left: 30px" *ngIf="edit">
<mat-form-field>
<input style="width: 70px" #endInput matInput
[matAutocomplete]="endAuto" (click)="onChooseEnd()"
formControlName="end" required="true">
<mat-autocomplete #endAuto="matAutocomplete"
(optionSelected)="onEndSelected($event)">
<mat-option *ngFor="let time of filteredEnd | async"
[value]="time">
{{time | amDateFormat:'h:mm a'}}{{getDifference(formGroup.get('start').value, time)}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<div style="margin-left: 50px" *ngIf="!edit">
{{end?.value}}
</div>
</mat-list-item>
</mat-list>
</tr>
</table>
I want to create a panel like above using angular 6 material design.
Use the below code
<mat-card>
<mat-card-header>
<div class="col-lg-12">
<div class="col-lg-9">
<h3>{{ pageTitle }}</h3>
</div>
<div class="col-lg-3">
<button mat-raised-button color="primary" [disabled]="!form.valid" (click)="form.ngSubmit.emit()">Save</button>
<button type="reset" mat-raised-button color="accent" (click)="cancelForm()">Cancel</button>
</div>
</div>
</mat-card-header>
<mat-progress-bar mode="indeterminate" *ngIf="progress"></mat-progress-bar>
<mat-divider></mat-divider>
<mat-card-content>
<mat-form-field>
<input matInput placeholder="Name [(ngModel)]="vehicleMakeViewModel.name" name="name" required #name="ngModel"></mat-form-field>
</mat-card-content>
</mat-card>
The above code produce the below template. The title and buttons are not properly align to the template.
I am not sure but it could be that you have not imported the styles for angular material (or that you have a different style, not the default one).
Try adding this to your styles.css
#import "~#angular/material/prebuilt-themes/indigo-pink.css";
info here
https://material.angular.io/guide/getting-started
also for info on themes:
https://material.angular.io/guide/theming