The current drop-down box has width greater than the the width of the line:
Is there a way to get rid of the extra width?
Here is my current code:
html:
<mat-form-field>
<mat-select disableOptionCentering placeholder="Choose an option">
<mat-option [value]="option" *ngFor="let option of my_list">
{{ option }}
</mat-option>
</mat-select>
</mat-form-field>
my_list:
export const my_list: string[] = [ "a", "b", "c", "d"];
style.css:
.mat-select-panel{
margin-left: 15px;
margin-top: 28px;
}
For anyone still trying to figure out without making the actual select smaller or wider.
The mat-select-panel uses 100% of the mat-select width plus 32px
min-width: calc(100% + 32px)
You can override this styling with ng-deep:
::ng-deep .mat-select-panel {
min-width: 100% !important;
}
Try this and change width:
<mat-select style="width:10px">
Try this
.mat-select-panel:not([class*=mat-elevation-z]){
min-width: calc(100% + 0px) !important; }
set width at mat-form-field tag level.
try this,
<mat-form-field style="width:50px">
\add class to mat-form-field tag
\and write style to that class
.input-container {
width: 100%;
\\ enter code here
}
Related
I'd like to increase the height of the Vuetify v-autocomplete, which is fixed at 304px (might be a calculated value, YMMV).
<v-autocomplete
class="flex-grow-0 ml-16 mr-6 largecontent"
prepend-inner-icon="mdi-magnify"
v-model="select"
:items="items"
item-text="name"
item-value="id"
:search-input.sync="search"
hide-no-data
label="Search anything (press /)"
>
<template #item="{ item }">
<v-list-item to="item.route">
<v-list-item-content>
<v-list-item-title v-text="item.name"/>
<div
v-if="item.desc"
v-html="item.desc"
/>
</v-list-item-content>
</v-list-item>
</template>
<v-autocomplete/>
These both work, but would apply the style to ALL v-autocomplete, which we don't want:
<style>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
<style>
.v_menu__content {
max-height: 600px !important;
}
</style>
So, I'd like to either scope it
<style scoped>
.v-autocomplete__content {
max-height: 600px !important;
}
</style>
Or add an entry to my global css file, something like:
.largecontent.v-autocomplete__content {
max-height: 600px !important;
}
But nothing seem to work, also tried the Vuetify deep selectors, but they seem to only work when there's a parent-child hierarchy, which is not the case here.
There is a menu-props property, that you can pass to v-autocomplete in order to customize its dropdown menu (including max-height).
<v-autocomplete :menu-props="{ maxHeight: 500 }">...
Did you tried put the lang=scss and use ::v-deep?
Maybe "deep" helps you to change the style in the way you want
I'm using Angular6 with material-designs. What I'm trying to do is get color input from mat-form-field. For that I used matinput type="color" inside my input tag. My HTML file is as follows,
<div>
<mat-form-field class="form-field">
<mat-label>Color</mat-label>
<input matInput type="color" formControlName="color"required placeholder="Color">
</mat-form-field>
</div>
Then I have added some CSS on it to design the color picker box according to my need,
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 25px;
height: 25px;
float: right;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
Now the output what I'm getting is,
Even though this contains black color in default, the form field didn't get any default input. So what I want to do is get the default color box as follows. (To easily understand the requirement I have designed my expectation using photoshop),
You have to add some styles and need some changes in ts file code to display that box
Here is a working example: https://stackblitz.com/edit/angular-tbkqbt
I am using mat-select in my Angular application. I would like to change the text color, but the color doesn't change.
<mat-select style="color: red" [(ngModel)]="someValue">
<mat-option>class="empty-select"</mat-option>
<mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
I can change the background color without problems, but the text color doesn't change.
You need to apply style on mat-option rather than mat-select as:
<mat-select [(ngModel)]="someValue">
<mat-option class="empty-select"></mat-option>
<mat-option style="color: red" class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
Also you can set color in class not-empty-select.
Update 1:
If you want to change color of selected option add following CSS:
.not-empty-select.mat-selected {
color: green !important;
}
Update 2:
If you want to change color in select box modify CSS as:
.not-empty-select.mat-selected {
color: green !important;
}
:host /deep/ .mat-select-value-text {
color: green !important;
}
If you check closely mat-select-value is the class which holds the css for placeholer font in mat-select tag;
so Using
::ng-deep .mat-select-value{
color: white!important; }
will apply the color you give. !important is to override the default value.
You can overwrite the css for following elements as -
Select box panel
/deep/ .mat-select-panel {
background-color: red;
}
Select box options element
/deep/ .mat-form-field-infix{
background-color: red;
}
Select box
/deep/ .mat-select{
background-color: red;
}
do not forget to add /deep/ as mentioned.
Select Box text color
Use this one if you want to change the text color of select.
/deep/ .mat-form-field-type-mat-select .mat-form-field-label, .mat-select-value {
color: red;
}
Demo copy is here - https://stackblitz.com/edit/angular-material-pagination-123456-5teixy
Add this to your styles.css file
.mat-select-red .mat-select-value{
color: red !important;
}
In your component.html file
<mat-select class="mat-select-red" [(ngModel)]="someValue">
<mat-option>class="empty-select"</mat-option>
<mat-option class="not-empty-select" *ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
::ng-deep .mat-select-arrow {
display: none !important;
}
its works for me
<mat-select [(ngModel)]="someValue">
<mat-option style="color: red" >class="empty-select"</mat-option>
<mat-option style="color: red" class="not-empty-select"
*ngFor="let unit of units [value]="unit">{{unit}}</mat-option>
</mat-select>
option appearance (legacy, standard, fill, outline)
<mat-form-field appearance="legacy">
<mat-label>Choose an option</mat-label>
<mat-select>
<mat-option value="option1">Option 1</mat-option>...
</mat-select>
</mat-form-field>
Lets say you have this select:
<mat-form-field appearance="fill">
<mat-label>The label</mat-label>
<mat-select>
<mat-option value="This">This</mat-option>
<mat-option value="That">That</mat-option>
</mat-select>
</mat-form-field>
This is displayed like this:
To style the colors only, try this:
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple {
background-color: red;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-label {
color: red;
}
::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
color: red;
}
::ng-deep .mat-primary .mat-option.mat-selected:not(.mat-option-disabled){
color: red;
}
Which produces
This works on Angular 11.2.0, Angular Material 11.2.0.
This helped me change the style of the selected text:
::ng-deep .mat-selected .mat-option-text { color: white!important; }
I have the following HTML to display select locations and below that map will be displayed.
I have the following HTML for the above view,
<mat-form-field class="locationSelector">
<mat-select placeholder="Choose location" (ngModel)="ServiceLocations">
<mat-option *ngFor="let location of ServiceLocations" [value]="location" style="width:200px; background-color: red; font-size: 10px;">
{{ location.areaName }}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<agm-map [latitude]="latitude" [longitude]="longitude" [zoom]="zoom">
</agm-map>
</div>
And corresponding CSS is ,
agm-map {
height: 300px;
position: relative;
}
.locationSelector {
width: 20%;
}
The view I am getting is,
And when I click on select options, I am getting a view as follows,
Please correct me where I am wrong.
All required material components are imported in app.module.ts
Import a theme in your global style.css file.
I've created a form in a dialog using material forms, but I can't seem to get the inputs to be wider than 180px despite following numerous examples including https://material.angular.io/components/input/example.
I'm sure this is a pretty standard CSS thing, but I don't have that sort of brain so I cant figure out the problem.
Does anyone have a serious / non-trivial example that works??
Here's mine:
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
CSS :
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
.mat-form-field.mat-form-field {
width: auto;
}
Thanks.
can you try using
mat-form-field {
width: 100%;
}
I had the same issue in a mat-card, this worked for me.
Seems like it's something to do with View Encapsulation. This thread explains it: https://github.com/angular/material2/issues/4034 but changing encapsulation for the component causes all sorts of compile failures.
This article gave me the correct solution:https://material.angular.io/guide/customizing-component-styles
I'll move my style to global scope...
.formFieldWidth480 .mat-form-field-infix {
width: 480px;
}
and in the component that opens the dialog:
this.newDialog = this.dialog.open(NewDialogComponent,
{
width: '650px', height: '550px',
data : newThing,
panelClass : "formFieldWidth480"
});
I hope this saves someone else the day I lost...
Just like Jonesie said, this behavior is related to View Encapsulation. In this context .mat-form-field-infix takes 180px as default value probably beacause of this. The auto value lets the browser calculates the width instead of puting hardcoded value. The !important declarations forces the style override for this.
I am using !important since it complies with the rules for the use of this property. See docs
::ng-deep .mat-form-field-infix {
width: auto !important;
}
It's that .mat-form-field.mat-form-field in the css that's causing an issue. As soon as I removed that, I could control the widths with .input-full-width width setting. I set up a demo here: StackBlitz.com
<h1 mat-dialog-title>{{title}}</h1>
<mat-dialog-content>
<form novalidate #f="ngForm" class="form-full-width">
<mat-form-field class="input-full-width">
<input type="text" [(ngModel)]="data.name" name="name" matInput placeholder="Name">
<mat-hint>Enter a unique name.</mat-hint>
</mat-form-field>
<mat-form-field class="input-full-width">
<textarea [(ngModel)]="data.description" name="description" matInput placeholder="Description"></textarea>
<mat-hint>You should describe the purpose/use of this thing.</mat-hint>
</mat-form-field>
</form>
</mat-dialog-content>
.form-full-width {
min-width: 150px;
max-width: 500px;
width:100%;
}
.input-full-width {
width:800px;
}
/* .mat-form-field.mat-form-field {
width: auto;
} */
The solution I found was this one into general style.css
mat-form-field {
margin-left: 2.5rem;
width: calc(100% - 2.5rem);
}
::ng-deep .mat-form-field-infix {
width:800px !important;
}
This should work fine.Not sure if it can be done without custom CSS.
I have the same issue, fixed it with.
But still no idea why this issue is happening...
.mat-form-field-infix {
width: 100%;
}