Is there any way in Angular Material to display the mat-label in the left outside of the mat-input ?
So far, I can't find anything in the Angular Material documentation that allows me to do this.
Greetings,
Here is another way:
Please apply your own style:
<form style="display: flex">
<label>Favorite food</label>
<mat-form-field>
<input matInput placeholder="Ex. Pizza" value="Sushi" />
</mat-form-field>
</form>
label css:
label {
display: flex;
align-items: center;
}
Related
So, im actually a javascript developer and my brother asked me to design a simple page for his business. Im not to good with frontend, so im using Material UI and pasting everything with a little bit of css.
Im doing a form with the card component, that should look like this: enter image description here
my problem is, I dont know how to put the logo (i have it in svg and png) above the card. Should i do it all with css? or how could i do this with MUI? I dont even know where to begin looking
To change insert the logo, just change the relative path in "image".
<CardMedia
component="img"
height="194"
image="/static/images/cards/paella.jpg"
alt="Paella dish"
/>
See more in https://mui.com/material-ui/react-card/
With and without MUI, you will experience the same logic behind the style. In the MUI, you'll use box, cardmedia, and form. In html you will use div, img and form.
I suggest you to try using HTML and CSS. When you start with React or another framework, you start building using component libraries. It's not a rule, it's just a suggestion. I made a simple example without MUI to help you:
HTML:
<div class="formBox">
<img
src="https://logodownload.org/wp-content/uploads/2014/09/google-logo-1.png"
width="100px"
height="auto"
/>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
CSS:
.formBox {
display: flex;
flex-direction: column;
align-Items: center;
padding: 20px;
gap: 10px;
max-width: 200px;
border: 1px solid;
border-radius: 10px;
}
I suggest you to learn more reading:
https://www.w3schools.com/html/html_forms.asp
And look for Styled Components and JSS/TSS, maybe you like it.
I'm having a hard time getting the labels on this form to line up beside the checkboxes. I'm using React with React-Hook-Form for validation and state management (here's the github: https://github.com/cipdv/ciprmt-mern/blob/main/client/src/components/User/HHForm/RFHHHForm.js if that helps, the file with the form is called RFHHHForm.js).
I've tried a few things:
I tried using semantic ui's library like this:
<div className='inline field'>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.epilepsy} name="epilepsy" type="checkbox" id="epilepsy" {...register('epilepsy')} />
<label>Epilepsy</label>
</div>
<div className='ui checkbox'>
<input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} />
<label>Diabetes</label>
</div>
When I used this, the label and checkboxes line up, but for some reason the checkboxes become uneditable (can't be checked or unchecked).
I tried making my own css stylesheet module like this:
input[type="checkbox"]
{
vertical-align:middle;
}
label,input{
display: inline-block;
vertical-align: middle;
}
But this didn't seem to work at lining anything up.
You can try to wrap the input inside the label
<label>Diabetes <input defaultChecked={healthHistory?.diabetes} name="diabetes" type="checkbox" id="diabetes" {...register('diabetes')} /></label>
or with your checkbox class you can
.checkbox{
display: flex;
align-items: center;
}
let me know if it worked.
select in an mat-expansion-panel. I am trying to get both of my ng-selects side by side, but even when I change the width. I can't seem to get them side by side. I went to some of documention and in one of the demos. They seem to use two ng-selects side by side. However, I think they are using boostrap to get that done. Does ngselect use boostrap as default or how can I get this down in material?
This is an example of what I am trying to achieve.
https://ng-select.github.io/ng-select#/forms
I tried changing the width this way:
.ng-select.AdditionalRecipientFormcustom ::ng-deep .ng-select-container {
width:30%;
}
<mat-expansion-panel [(expanded)]="xpandStatus" #formDirectiveTwo="ngForm" [formGroup]="AdditionalRecipientForm">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight" [expandedHeight]="customExpandedHeight" >
<mat-panel-title>
Add Recipients To The Report
</mat-panel-title>
</mat-expansion-panel-header>
<button mat-raised-button (click)="externalLogin()" color="primary" >Create Recipient</button>
<br>
<ng-select class="AdditionalRecipientFormcustom"
[items]="recipients"
[hideSelected]="true"
#select
loadingText="Loading..."
[selectOnTab] = "true"
dropdownPosition="auto"
bindLabel="Email"
placeholder="Select Recipient"
formControlName="UserRecipientsDto">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
<div><span [ngOptionHighlight]="search">Email: {{item.Email}} </span><span>, </span><span [ngOptionHighlight]="search">Name: {{item.FirstAndLast }}</span></div>
</ng-template>
</ng-select>
<mat-form-field class="add-addtional-recipients-form-field">
<mat-label>Contact Name</mat-label>
<input matInput placeholder="User Email Address" formControlName="FirstAndLast">
</mat-form-field>
<ng-select class="AdditionalRecipientFormcustom"
[items]="recipientTypes"
[hideSelected]="true"
#select
loadingText="Loading..."
[selectOnTab] = "true"
dropdownPosition="auto"
bindLabel="typerecipient"
placeholder="Select Type Of Recipient"
formControlName="TaskRecipientTypeDto">
<ng-template ng-option-tmp let-item="item" let-search="searchTerm">
<div><span [ngOptionHighlight]="search">{{item.typerecipient}}</span></div>
</ng-template>
</ng-select>
<br>
<button mat-raised-button class="btnUpdate" (click)="resetFieldsForAdditionalForm()" [disabled]="!AdditionalRecipientForm.valid" color="primary"><b>Reset</b></button>
<button mat-raised-button class="btnReset" (click)="createNewRecipientUser(); this.getLogins(); " color="primary"><b>Update</b></button>
<br>
</mat-expansion-panel>
The problem is not specific to ng-select or material. I think you are not fully understanding the display property in css. The ng-select components end up on different lines because of the default display: block; styling. You can either give the ng-selects and the mat-form-field display: inline-block; or solve it with flexbox:
// apply this class to the parent element of the form controls (ng-select, ...)
.example-wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
}
// give ng-select a fixed width, because it isn't limited by the viewport width now
ng-select {
width: 200px;
}
For more detailed information on flexbox, see this link. Also, see a stackblitz example of what I've explained so far.
Using Angular 7+ and Angular Material I'm looking to change the color of the Placeholder text on input fields.
Reviewing similar questions I've tried using ::ng-deep and mat-placeholder. I got it to work using mat-placeholder, however this will be removed in future versions of Angular Material.
<form class="example-form">
<mat-form-field class="example-full-width">
<input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
</form>
Change the color of the matInput placeholder text.
<mat-form-field>
<input matInput type="text">
<mat-placeholder class="placeholder">Email</mat-placeholder>
</mat-form-field>
.mat-form-field-underline {
/*change color of underline*/
background-color: #dce2f4 !important;
}
.mat-form-field-ripple {
/*change color of underline when focused*/
background-color: #2e2f36 !important;
}
.placeholder {
color: #dce2f4 ;
}
I have an angular expansion panel as shown below.
But I want to change the the design of the arrow to something like this:
Not expanded:
Expanded:
How? or is it possible for me to do so in angular material?
Code below:
HTML:
<md-expansion-panel>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
TS:
import {Component} from '#angular/core';
/**
* #title Basic expansion panel
*/
#Component({
selector: 'expansion-overview-example',
templateUrl: 'expansion-overview-example.html',
})
export class ExpansionOverviewExample {}
Yes it is possible. Give your expansion panel a reference id e.g. example and set the hideToggle property as true.
In the <md-panel-description>, you can place your icons and use the expanded property of the panel to show or hide the relevant icons.
<md-expansion-panel class="custom-header" hideToggle="true" #example>
<md-expansion-panel-header>
<md-panel-title>
Personal data
</md-panel-title>
<md-panel-description>
Type your name and age
<md-icon *ngIf="!example.expanded">play_arrow</md-icon>
<md-icon *ngIf="example.expanded">arrow_drop_down</md-icon>
</md-panel-description>
</md-expansion-panel-header>
<md-form-field>
<input mdInput placeholder="First name">
</md-form-field>
<md-form-field>
<input mdInput placeholder="Age">
</md-form-field>
</md-expansion-panel>
To provide space between the icon and panel description, add the following classes in your component.css:
.custom-header .mat-expansion-panel-header-title,
.custom-header .mat-expansion-panel-header-description {
flex-basis: 0;
}
.custom-header .mat-expansion-panel-header-description {
justify-content: space-between;
align-items: center;
}
I have used material icons. You can place your custom icons if you want. Here is a link to stackblitz demo.
extended the answer from #Faisal and as per the latest version of angular material, we will use mat prefix instead of md for the Material components.
Angular Material 8.1.4
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
<mat-expansion-panel-header>
<mat-panel-title class="font-weight-bold font-small">
Info
</mat-panel-title>
<mat-panel-description>
<mat-icon *ngIf="!xyz.expanded">play_arrow</mat-icon>
<mat-icon *ngIf="xyz.expanded">arrow_drop_down</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
<mat-expansion-panel class="mb-15px" hideToggle="true" #xyz>
Stackblitz Demo
Another pretty solution .. just add a span with fxFlex
<mat-panel-description>
<span fxFlex></span>
<img src="">
</mat-panel-description>
Don't forget to add hideToggle to the mat-expansion-panel
<mat-expansion-panel hideToggle>