I'm wondering if there is a way to resize mat-chip and mat-form-field to a smaller size? Currently, my mat-form-field for chips is really big and almost the same size as other fields, such as the description field, so I want the form fields for chips and the chip itself to be smaller.
<mat-chip-list #chipList>
<div>
<mat-chip *ngFor="let superTag of superTags" [selectable]="selectable" [removable]="removable"
(removed)="remove(superTag)">
<img class="super-icon" src="/assets/images/icons/super-tag-icon.svg">
{{superTag.tag}}
<mat-icon matChipRemove *ngIf="removable" matTooltip="Remove a super tag">cancel</mat-icon>
</mat-chip>
</div>
<div>
<input matInput #input [(ngModel)]="tagIn" [formControl]="tagCtrl" [matAutocomplete]="auto" [matChipInputFor]="chipList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" (matChipInputTokenEnd)="addTag()">
<!-- <img class="icon" src="/assets/images/icons/chevron-down-icon.svg" alt="down"> -->
</div>
</mat-chip-list>
.form {
// display: flex;
width: calc(100% - 80px);
height: 10px;
}
.icon {
margin-top: -12px;
}
.super-icon {
width: 15px;
margin-right: 8px;
}
.is-loading ::ng-deep .mat-option-text {
display: flex;
justify-content: center;
}
You can decrease the padding values. For me, this worked:
mat-chip {
padding: 4px 9px !important;
}
Adjust the values accordingly. Also, you can change the font-size if needed.
This is the approach I used:
:host ::ng-deep .mat-chip-list-wrapper mat-chip {
padding: 0 8px;
}
Related
I was making a search-bar and put a mat-autocomplete in the mat-form-field. The input field goes out of the bounds of the search-bar like this
This is the code
HTML:
<div class="search-bar">
<mat-icon>search</mat-icon>
<form class="example-form">
<mat-form-field class="example-full-width" appearance="fill">
<input type="text"
placeholder="Search for a food item ..."
matInput
[formControl]="myControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{option}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
</div>
CSS:
.search-bar{
background-color: #ffffff;
height: 40px;
border-radius: 20px;
display: flex;
padding: 10px;
min-width: fit-content;
width: max-content;
}
.example-form{
background: #ffffff;
outline: none;
border-style: none;
width: 30rem;
font-size: 1.2rem;
width: max-content;
}
input{
height: 2rem;
}
How do I change the height of the mat-form-field?
Thanks in advance
If you want to know how you can change the height of the mat-form-field (No offense just if you didn't know). You could try the following.
mat-form-field {
height: 20px;
}
I would recommend you to use the Developer Tools in your browser to find the element. The one that is pushing down the mat-autocomplete and then change the css properties of the affecting class. As it is obvious, that it shouldn't be that way as shown in your screenshot.
I have an element (a button) and I want to position it below the bottom right corner of a textarea (there is also some more stuff on the right of the textarea. Since the width of that textarea is dependent upon the display size, I want to somehow set the left margin of that button in dependence of the width of the text area. Is that even a possible solution? I'm also using Angular 9.
I hope someone can help me.
This is the html:
<div class="user-container">
<div class="editor">
<h3>Berichte oder schreibe etwas über deinen Tag</h3>
<ckeditor
[editor]="Editor"
[(ngModel)]="editorData"
(ready)="onReady($event)"></ckeditor>
</div>
<div class="date-picker">
<h3>Wähle das Datum</h3>
<mat-form-field>
<mat-label>Wähle das Datum</mat-label>
<input matInput (dateInput)="onDateChange($event.value)" [matDatepicker]="picker" [ngModel]="date" (click)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</div>
<app-emoji-rating-scale (emojiSelected)="onEmojiSelected($event)"></app-
emoji-rating-scale>
</div>
<button (click)="onSaveEntry(editorData)" mat-raised-button>Eintrag speichern</button>
<button class="calendar-button" routerLink="/calendar" mat-raised-button>Einträge anzeigen</button>
And this the css (if it helps):
h3 {
font-weight: 500;
}
.user-container {
position: relative;
height:75vh;
max-height: 300px;
}
.editor {
display: inline-block;
width: 75%;
height:70%;
}
.editor h3 {
margin-right: 20px;
vertical-align: top;
}
.date-picker {
display: inline-block;
position:absolute;
top:0px;
width: 20%;
margin-left: 10px;
}
:host ::ng-deep .ck-editor__editable_inline {
display: block;
height:100%;
border: 1px solid var(--ck-color-toolbar-border);
}
app-emoji-rating-scale {
position: absolute;
margin: 100px 0 0 10px;
}
Kind regards
Fonzane
I want to change my icon to a button to use it as copy to clipboard method. But when I do it, the button moves to the right side. Only when I try a around the text it works but of course the formatting is broken.
<mat-list>
<h3 matSubheader>Persönliche Daten</h3>
<mat-list-item>
<button mat-icon-button ngxClipboard [cbContent]="firstname">
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<h4 matLine>{{firstname}}</h4>
<p matLine>Vorname</p>
</mat-list-item>
<mat-divider [inset]="true"></mat-divider>
<mat-list-item>
<mat-icon matListAvatar>description</mat-icon>
<h4 matLine>{{lastname}}</h4>
<p matLine>Nachname</p>
</mat-list-item>
</mat-list>
My CSS:
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
background-color: rgba(0,0,0,0.04);
}
mat-list-item mat-icon[matListAvatar], .mat-list-item-content mat-icon[matListAvatar] {
align-items: center;
align-content: center;
justify-content: center;
display: flex;
}
/deep/ .mat-list-item-content {
padding: 0!important;
}
/deep/ .mat-list-base .mat-subheader {
padding: 0!important;
}
p {
font-family: Lato;
color: rgba(0,0,0,.54);
}
Using the (click) property
You can just make the icon behave like a button.
Add a (click) property to it and call the function you want!
<mat-icon (click)="myFunction($event)" matListAvatar>account_box</mat-icon>
Then you can add some :hover css to it to make it feel like a button.
Using HTML/CSS
You can place any content next to the button in a wrapper, you can customize this one in the css to behave differently if needed (if you end up adding more data to display you might have to play around with the flex properties, margin... or you might need to have nested wrappers, etc...)
<button mat-icon-button >
<mat-icon matListAvatar>account_box</mat-icon>
</button>
<div class="test-wrapper">
<h4 matLine>{{firstname}}</h4>
<p matLine> Vorname</p>
</div>
with this css:
.test-wrapper{
padding-right: 0;
padding-left: 16px;
width: 100%;
display: flex;
flex-direction: column;
}
.test-wrapper > *{
margin: 0;
}
Summary:
I want to widen the input box on my page.
When I Inspect, on the screen it says "div.mat-form-field-infix 300x51.5 and on the right it says a width: 180px;
The actual input box says 300x24
Tried:
After looking at angular 5 material - form fields stuck at 180px I tried the following:
<mat-form-field style="width:500px !important">
Then I tried:
.input-full-width {
width: 400px;
}
.
<mat-form-field class="input-full-width">
Then I tried:
.mat-form-field-infix {
width: 480px;
}
Code:
CSS:
#import '../../../../form-elements.css';
.l-card {
width: 80%;
max-width: 80rem;
}
.logo > img {
display: block;
max-height: 7rem;
max-width: 30rem;
margin: 1rem auto 3rem auto;
}
.mat-radio-button {
display: block;
margin: 1rem auto;
}
.mat-radio-button > ::ng-deep.mat-radio-label {
white-space: normal;
word-break: break-all;
align-items: flex-start;
}
#media screen and (min-width: 1000px) and (min-height: 600px) {
.l-card {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
}
}
.example-container {
display: flex;
flex-direction: column;
}
.example-container > * {
width: 500px;
}
HTML:
<div fxLayoutAlign="center center" *ngIf="!isLoad">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoad">
<p>
Would you prefer to receive the verification code by text message or by email?
</p>
<form [formGroup]="_form">
<div class="center-and-left">
<mat-radio-group>
<mat-radio-button (change)=sO($event) value="phone">Text {{ phone }}</mat-radio-button>
<mat-radio-button (change)=sO($event) value="email">Email {{ email}}</mat-radio-button>
</mat-radio-group>
</div>
<button type="button" mat-raised-button color="primary" (click)="sendC()" [(disabled)]="isDisabled" >Send Code</button>
<div fxLayoutAlign="center start" *ngIf="!isLoaded && showSpinner">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="isLoaded">
<br />
<div class="example-container">
<mat-form-field>
<input matInput (keyup)="someCode($event.target.value)" (keyup.enter)="onSubmit()" type="number" max="6" min="6" placeholder="Please enter verification code" formControlName="code" required>
</mat-form-field>
</div>
<p *ngIf="failedVerfication" class="error">Verification failed. Please retry or press Send Code to have a new code sent to you.</p>
<button mat-raised-button color="primary" type="button" (click)="onSubmit()" [disabled]="isDisabledSubmit">Verify and Sign In</button>
</div>
Expected: To widen the input box
Actual: No change
Try ng-deep to replace the existing style
html code:
<mat-form-field class="width-480"></mat-form-field>
css code:
::ng-deep .width-480{
width: 480px;
}
I guess it's an year late to answer, but the answer is a small change from what Imrul's answer says.
Try ng-deep with !important to override the style and apply whatever the default style is.
::ng-deep .width-480{
width: 480px !important;
}
This would definitely give your expected answer and widen it.
I have this list of component, I would like to align them on the same row. I kind of managed to do it , but they are not correctly aligned in vertical. Also, I do not know if I can replace that line
.search-container > * {
display: inline-block;
}
In angularjs I was using layout="row" but it doesn't exist in angular 4 anymore.
https://stackblitz.com/edit/angular-cteh6k
HTML
<div class="search-container" layout-align="space-between end">
<div class="conditions">
<mat-form-field>
<mat-select #fontSize value="28px" placeholder="Select Search Field">
<mat-option *ngFor="let index of [1,2,3,4,5]" value="opt{{index}}">opt{{index}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field>
<input matInput type="text" placeholder="Clearable input" [(ngModel)]="value">
<button mat-button aria-label="Clear" *ngIf="value" matSuffix mat-icon-button (click)="value=''">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</div>
<div class="buttons-container">
<div class="condition-button clickable-elem">
<mat-icon svgIcon="minus-circle-outline">asd</mat-icon>
</div>
<div class="condition-button clickable-elem">
<mat-icon svgIcon="plus-circle-outline">asd</mat-icon>
</div>
</div>
<div class="buttons-container">
<button class="md-raised btn-submit" mat-button>FILTER</button>
</div>
</div>
CSS
.search-container > * {
display: inline-block;
}
.search-container {
font-size: 0.7rem;
}
md-input-container .md-errors-spacer{
min-height: 0 !important;
}
.buttons {
margin-left: 5px;
}
.condition-button {
display: inline-block;
}
svg {
width: 30px;
cursor: pointer;
}
.conditions{
max-height: 170px;
padding-right: 10px;
padding-top: 10px;
overflow-y: auto;
}
Use the following style
.search-container {
font-size: 0.7rem;
display: flex;
align-items: flex-end;
}
P.S.: In case you want it to be center align use "align-items: center;"
Also remove this style
search-container > * {
display: inline-block;
}
See updated example enter link description here
add this css
.buttons-container, .conditions {
vertical-align: middle;
}