I am running angular app, I have autocomplete field ,I want adjust position of this . I referred official document enter link description here under method ,
updatePosition -
Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.
I am not sure how to use
This is my template.html
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
As shown the pic below I want the mat-option to move little towards left
As shown in this pic, class highlighted always gets style applied to left:779px but I want to remain atv 775px
I was able to style this using
.mat-autocomplete-panel {
position:relative;
right:3px;
}
Related
I created an application which contains material input for search purpose.
I would like the horizontal line of the input field to have progress indicator, when search is in progress.
My idea is to show and hide progressBar with *ngIf and move it with css to match te input horizontal line height.
Here is the code:
<mat-form-field>
<mat-label>Search</mat-label>
<input matInput (input)="onSearchChange($event.target.value)">
<mat-progress-bar *ngIf="searchDone" style="top:9px" [color]='color' mode="query"></mat-progress-bar>
</mat-form-field>
I dont think it is the best solution, because I see the input horizontal line under the progressbar.
Is there any solution that makes the input horizontal line to show progress by itself?
As one possible solution you can start using the lib NgxMatSelectSearch.
The Api has an input option searching to display an indicator while searching.
See the example Stackblitz and try to search in "Server side search" input.
You can position the progress bar over the form field with a template like this:
<div class="container">
<mat-form-field appearance="fill">
<textarea matInput [(ngModel)]="message" [matTextareaAutosize]="true" [matAutosizeMinRows]="1" [placeholder]="placeholder"></textarea>
<button (click)="create()" mat-icon-button matSuffix matTooltip="Send" [disabled]="creating">
<mat-icon>send</mat-icon>
</button>
</mat-form-field>
<mat-progress-bar mode="indeterminate" *ngIf="creating"></mat-progress-bar>
</div>
and css like this:
.container {
position: relative;
}
mat-progress-bar {
position: absolute;
bottom: 16px;
}
I am using mat-autocomplete in that when i select the dropdown and scroll the main bar then that dropbox is not moving with autocomplete input field.
enter image description here
code:
<td width = 24% *ngIf="!stock.value.status_item">
<input style="width: 167px;" type="text" placeholder="Select Item" #editInput tabindex="1" class="form-control"
matInput [matAutocomplete]="itemsAuto" [(ngModel)]="stock?.value.commodity_name" [ngModelOptions]="{standalone:true}" [disabled]=" stock.value.confirm_status" (input)="onSearch(stock?.value.commodity_name)" >
<mat-autocomplete #itemsAuto="matAutocomplete" (opened)="autocompleteScroll()">
<mat-option *ngFor="let item of ingredients" [value]="item.name" [disabled]="!isItemAvailable(item)" (click)="addStockManully(item,i)">
{{item?.name}}
<span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvO" *ngIf="!isItemAvailable(item)">
</span>
<span class="styled__SelectionIcon-sc-5ssw50-7 bUDhvOs" *ngIf="isItemAvailable(item)">
</span>
</mat-option>
</mat-autocomplete>
</td>
the behavior is not wrong, Once the dropbox is rendered be it for the mat-select of mat-autocomplete, once it is rendered it would not move its position.
So one thing you can do here is that, after selecting one of the options in the dropdown. You can close the dropbox and then scroll the main bar.
Or you can just close the dropbox on the blur property of the input. So when you do something else it would immediately close the list shown in the dropdown.
I am new to angular. Created a header component and in the header I have added another component which is having below code.
<mat-form-field class="select-comp">
<mat-label>Fruits</mat-label>
<mat-select id="select1" class="item-selector">
<mat-option *ngFor="let fruit of fruits" [value]="fruit.value">
{{fruit.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="select-comp">
<mat-label>Vegitables</mat-label>
<mat-select id="select2" class="item-selector">
<mat-option *ngFor="let vegitable of vegitables " [value]="vegitable.value">
{{vegitable.viewValue}}
</mat-option>
</mat-select></mat-form-field>
if I inspect ".mat-form-field-infix" and ".mat-select-placeholder" css display properties are showing as block , I tried to override it using display: inline !important. but it is not working and showing as block in the screen as well the property is block when we inspect. Any idea what is wrong ?
I am running angular app, I have autocomplete when I hover over the autocomplete mat-options, I want to see entire customer number and name. I tried to do this
<mat-form-field [style.cursor]="pointer" [style.cursor]="pointer" [style.width.px]=300 >
<input class="selectCustomer" class="selectCustomerData" id="inputCustomer" matInput [matAutocomplete]="auto" [formControl]="customerFilterControl" [(ngModel)]="customerName">
<mat-icon matSuffix>keyboard_arrow_down</mat-icon>
<p id="spandiv">{{customerName}}</p>
<mat-autocomplete dropdown-arrow="true" panelWidth ="450px" #auto="matAutocomplete" [displayWith] = "displayFn">
<mat-option class="CustomerDropDown" *ngFor="let customer of filteredOptions | async" [value] ="customer.AccountID +' '+'('+ customer.AccountName + ')'" (onSelectionChange)="onCustomerChange(customer)">
{{customer.AccountID}} ({{customer.AccountName}}) <p id="spandiv1">{{customer.AccountID}} ({{customer.AccountName}})</p>
</mat-option>
</mat-autocomplete>
</mat-form-field>
Basically I want to see value when I hover on the mat-option
One easy way to do this is to put the option text inside a div element with a small max-width. Then style that div element so overflows are normally hidden, but not when the option text is being hovered.
Example: https://stackblitz.com/edit/angular-vzfpjy
One problem with this solution is that the user has to hover over the text of the option to show the full value.
Scenario :
I am using Chips Autocomplete component.
On selecting the particular option from the list it is displaying the
selected option as the chip in the input filed as shown in below
image.
Todo :
I want these chips to be displayed outside the input field, means in any other div.Like below image How can i do this ?
Here is the stackblitz link.
Move <mat-chip> out of <mat-form-field></mat-form-field>
<div>
<mat-chip
*ngFor="let fruit of fruits"
[selectable]="selectable"
[removable]="removable"
(removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</div>
See here:https://stackblitz.com/edit/angular-h8zdkh-ao3bzb?file=app/chips-autocomplete-example.html
Just move the input field outside (top or bottom) of the </mat-chip-list> and you should be fine.
You might want to add some padding/margin after that :)
Use simple auto-complete to search players and display the selected players as chip-list inside the outer div as like below
<mat-form-field class="example-chip-list">
<input matInput placeholder="New fruit..." #fruitInput [formControl]="fruitCtrl" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
<mat-option *ngFor="let fruit of filteredFruits | async" [value]="fruit">
{{fruit}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<div class="otherDiv">
<mat-chip-list>
<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable" [removable]="removable" (removed)="remove(fruit)">
{{fruit}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
It is very simple.
as you are already using fruits array to add or remove the items,
thus you can access fruits array any where in your html file of that component
<h1> *ngFor="let fruit of fruits">{{fruit}} </h1>