When I try and set a matInput's class to a value using "{{}}", it changes the formatting for some reason. Here's the code with curly braces plus what it
looks like.
<mat-tab label="1">
<div *ngFor="let name of playerAndID">
<h3>{{ name.name }}</h3>
<mat-form-field class="scoreInput">
<input matInput placeholder="Score" class="{{name.index}}">
</mat-form-field>
</div>
</mat-tab>
If I change the class name to anything else, it displays normally. Here's what it looks like, as well as the code:
<mat-tab label="1">
<div *ngFor="let name of playerAndID">
<h3>{{ name.name }}</h3>
<mat-form-field class="scoreInput">
<input matInput placeholder="Score" class="ANYTHING ELSE">
</mat-form-field>
</div>
</mat-tab>
How can I prevent this from happening when using the curly braces? This issue doesn't happen in any other part of my application.
It seems like when you specify the class using {{}}, it overrides the default one of "mat-input-element mat-form-field-autofill-control cdk-text-field-autofill-monitored". I was able to fix the formatting issue by changing the Id instead.
have you tried
[ngClass]="{ name.index : true }"
refer ngClass
Related
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';
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 ?
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>
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 want to apply css style(link is below) to my Django boolean form in my template.
https://proto.io/freebies/onoff/
I did something like this. The style is applied to the checkbox but the checkbox doesn't change status 'OFF' to 'ON'. (when I click it, it would not do anything)
Template
<div class="onoffswitch">
<span class="onoffswitch-checkbox" id="myonoffswitch" checked>{{form.mixed_load}}</span>
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
Forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch'}))
Can someone tell me how to apply css style to Django form more effectively?
Thank you
You need to replace your code to look like this in your forms.py:
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch','id': 'myonoffswitch'}))
You were missing id attribute, which is used in the for attribute of label tag. See this answer for in-depth explanation what is the for tag for, and why do you need to set id on your input field.
However I can recommend you using django-widget-tweaks, which is really nice and easy to use.
Full working code:
Make sure you have css styles applied to the template file.
# template
...
<div class="onoffswitch">
{{ form.mixed_load }}
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
...
# forms.py
mixed_load = forms.BooleanField(widget=forms.CheckboxInput(attrs={'class':'onoffswitch-checkbox','id': 'myonoffswitch'}))
This way is one of proposed ways to customize widget look.