When i tried to open angular material datepicker it was opening upside of an input field.
How to make it to open downside of an input field.
<mat-form-field appearance="outline" class="w-100 date-class">
<mat-label class="required">End Date</mat-label>
<input
matInput
[matDatepicker]="picker2"
(dateChange)="onEndDateChange($event)"
[min]="todayDate"
formControlName="toDate"
readonly
/>
<mat-datepicker-toggle matPrefix [for]="picker2"></mat-datepicker-toggle>
<mat-datepicker #picker2 yPosition="below"></mat-datepicker>
</mat-form-field>
If you want to control where the drop will be places you couls use parameters like: DatepickerDropdownPositionX, DatepickerDropdownPositionY (https://material.angular.io/components/datepicker/api)
type DatepickerDropdownPositionY = 'above' | 'below';
Related
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 have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.
When I was reading the documentation in Material Design Lite's official page, no class name is mentioned for the fixed label with a textbox. In case of textarea they have a solution. But same code like the following one is creating only placeholder instead of a label for input type = "text".
<div class="mdl-textfield mdl-js-textfield">
<input class="mdl-textfield__input" type="text" id="sample5">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
I haven't seen this documented anywhere but it was annoying me so I delved into the SCSS to see what I could do. No changes to CSS are required. I managed to solve it by doing the following:
Add the mdl-textfield--floating-label has-placeholder classes to the outer <div> element.
Add a placeholder attribute to the <input> element, it can contain a value or remain empty; either way it will still work.
This will force the label to float above the input, instead of acting as a placeholder.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label has-placeholder">
<input class="mdl-textfield__input" type="text" id="sample5" placeholder="">
<label class="mdl-textfield__label" for="sample5">Text lines...</label>
</div>
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;
}
Is there any way to have a slider and next to it an editable field with it's current value?
I am using MDL and not polymer, because its light weight and should be distributed with locally run software.
This is a way:
<input class="mdl-slider mdl-js-slider" type="range"
min="0" max="100" value="50" tabindex="0" id = "slide_01">
<form action="#">
<div class="mdl-textfield mdl-js-textfield" id="text_01">
<input class="mdl-textfield__input" type="text" >
</div>
</form>
and
$('#slide_01').on('input',function(){
$("#text_01").get(0).MaterialTextfield.change(this.value);
});
$('#inp_text_01').keyup(function() {
$("#slide_01").get(0).MaterialSlider.change($('#inp_text_01').val());
});
-- updated the code and the fiddle to make it update the slider when the value is entered in the field --
https://jsfiddle.net/n6xy84ov/
I think there should be a better way, referring to my question here:Fetching the value of a mdl-textfield