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.
Related
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;
}
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>
I am trying to put an html input to the right of ion checkbox but it is not working.
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
<input type="text">
</ion-checkbox>
</label>
However, it works if text is being inserted
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
Label
</ion-checkbox>
</label>
Technically it is working,
First I would add a placeholder value to the input box so you can see some sort of value.
<label>
<ion-checkbox ng-model="mode" ng-checked="checked">
<input type="text" placeholder="Input">
</ion-checkbox>
</label>
Now that we see the input, we can't click on it, because ionic have added a class in the background to disable all pointer events on Inputs that are inside of Checkboxes.
To fix this, we simply add this to our css.
.item-checkbox .item-content{
pointer-events: auto;
}
To hide (but retain the functionality) the ugly default input type file button for file dialog I used the following mechanism:
HTML:
<label for="file-input">
<i class="fa fa-edit"></i> <!-- acts as file input on click-->
</label>
<input type="file" id="file-input" />
CSS:
#file-input {
display: none; //hide the file input
}
This is working expectedly: I click on the font awesome edit icon and the file dialog pops up.
However, when I use a button it stops working. I get no file dialog on clicking the button:
<label for="file-input">
<button type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
The Label represents a "caption" for an item in a user interface.
The reason why your button isn't working is because a button isn't considered a valid "caption" for a "control" element because it is a "control" element.
(see: https://developer.mozilla.org/nl/docs/Web/HTML/Element/label)
If you use an image or a piece of text inside the label it will work, because that will be considered a caption (this is why your first attempt worked). If you want to create a custom button you can use some text or an image tag otherwise you'll need some javascript.
Edit: maybe this page can be of help: http://webmuch.com/how-to-customize-a-file-upload-button-using-css3-html5-and-javascript/
The javascript they use shows the user what file (s)he has selected
Just change the jQuery code and HTML tag will be as it is.
<label for="file-input">
<button class="upload_file" type="button">Upload file</button> <!-- not working-->
</label>
<input type="file" id="file-input" />
Jquery Code:
jquery("[for=file-input] .upload_file").on("click", function(){
jQuery("#file-input").trigger("click");
})