I have an Antd Input and i want to change the color of allow clear to white.
<Input
placeholder="text"
allowClear
/>
Create a css file and customise the css class
index.css
.anticon {
color: white;
}
Example
This can be achieved using the clearIcon property of allowClear as mentioned in the documentation.
Example:
import { CloseCircleTwoTone } from '#ant-design/icons';
import { Input } from 'antd';
<Input
allowClear={{clearIcon:<CloseCircleTwoTone twoToneColor="#FFFFFF"/>}}
placeholder="Karan"
style={{width: '100%', background: "black"}}
defaultValue="Custom Name"
/>
Note: You can also create your own icon/react node with white color, I have just used an existing icon from ant design.
I achieved this by adding this on css file
.ant-input-clear-icon{
color: white;
}
Related
I am simply showing a button like this:
<el-button plain circle icon="el-icon-refresh"></el-button>
But the icon inside the button is too small. Is there a way to enlarge the icon only? I am using Vue.js for my project.
Element-ui doesn't support this by it's API. However the icon attribute places a class on i-element within a button. you are able to add a second class and add you own styling.
<el-button plain circle icon="custom-icon el-icon-refresh"></el-button>
CSS:
.custom-icon {
font-size: 2rem;
}
This works for me:
HTML
<el-button plain circle icon="el-icon-refresh" class="custom-icon"></el-button>
CSS
.custom-icon {
font-size: 2rem;
}
This worked for me.
HTML:
<el-button icon="el-icon-circle-plus-outline">Add</el-button>
CSS:
<style lang="less" scoped>
/deep/ .el-icon-circle-plus-outline {
font-size: 15px;
}
</style>
I've been looking but can't locate the key reference that enables me to update the Inputs pre/post tab.
<Input
addonAfter=".com" // <-- I want to change this bg color
defaultValue="100"
style={{
width: '110px',
backgroundColorAddonAfter: 'red' //HERE, whats the key name?
}}
/>;
The pre/post tabs are the 'greyish' areas that http: and .com in them. I want to change those colors.
There are two ways to achieve this:
Override CSS class
You can override all post and pre tabs colors.
/* import ./App.css */
/* first and last are red */
.ant-input-group-addon {
background-color: red;
}
.ant-input-group-addon:first-child {
background-color: purple;
}
.ant-input-group-addon:last-child {
background-color: blue;
}
Style your own component with Input.Group
Here we use Input.Group which groups components as done with addonBefore and addonAfter, you need to make your own PreComponent and PostComponent :
<Input.Group compact>
<PreComponent color="pink">{'http://'}<PreComponent/>
<Input style={{ width: '30%' }} defaultValue="my site" />
<PostComponent color="red">.com<PostComponent/>
</Input.Group>;
Check the demo to grasp what needs to be done:
I use angular 7 with angular material and i want to remove the space bottom as you can see. I tried many way but no sucess.
You can add this in your css
::ng-deep .mat-form-field-wrapper{
margin-bottom: -1.25em;
}
NOTE: As you remove the space you cannot put <mat-hint>hint</mat-hint> or <mat-error>error</mat-error> properly.
Error and hint get inside the form-field.
Without using ::ng-deep( for Angular 8 )
Turn off encapsulation of your component inside which you change the padding.
You can do this by
import {Component,ViewEncapsulation} from '#angular/core';
#Component({
selector: 'example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}
Wrap the component you want to style in a custom class. So it wont affect any other mat-form-field components.
Let's wrap this with with my-form-field class for now
<mat-form-field class="my-form-field">
<input matInput placeholder="Input">
</mat-form-field>
.my-form-field .mat-form-field-wrapper {
margin-bottom: -1.25em;
}
You can add these css in global stylesheet without turning off view encapsulation. But the more elegant method is the above one.
Try the following:
<mat-form-field style="margin-bottom: -1.25em">
(You can follow the discussion about this extra bottom space here: https://github.com/angular/components/issues/7975)
In angular 9, I was able to remove the gaps only by adding the following into the component.scss (the other answers didn't worked in my case):
:host ::ng-deep .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
Also, I'm using appearance="outline", for other appearances, it will probably be necessary to change other css classes and properties, since it may have other elements.
For anyone reading this in 2023: Angular 15 now added a new property to the form fields: subscriptSizing.
If you add subscriptSizing="dynamic" to your HTML it'll remove the space until an error or hint actually needs to get displayed and only then expands. This causes a layout shift, but depending on your use case it is probably the better option than manually adding a margin as suggested (and necessary up to version 14) before.
For reference see https://material.angular.io/components/form-field/api#SubscriptSizing
My solution was to use an additional class.
HTML:
<mat-form-field class="no-padding">
<input type="number" matInput placeholder="Speed" [ngModel]="speed"
(ngModelChange)="onSpeedChange('speed', $event)"/>
</mat-form-field>
SCSS:
.no-padding {
.mat-form-field-wrapper {
padding-bottom: 0 !important;
}
}
The !important keyword is unfortunately necessary as it will otherwise just pull in the default instead.
or simply:
html
<mat-form-field class="no-bottom">
...
</mat-form-field>
css
.no-bottom {
margin-bottom: -1.25em !important;
}
I test by Angular 10, this works:
:host ::ng-deep .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
Also, if you need to apply ONLY on a special field, define a class:
<mat-form-field appearance="outline" class="no-wrapper">
<input matInput>
</mat-form-field>
And put class name in your css:
:host ::ng-deep .no-wrapper .mat-form-field-wrapper{
margin: 0 !important;
padding: 0;
}
I am able to remove bottom space of mat-form-filed by using following css in style.scss
.mat-form-field-wrapper{
padding-bottom: 10px;
}
What about the following template:
<mat-form-field appearance="standard" class="compact-input">
<mat-label>Test</mat-label>
<input matInput>
</mat-form-field>
and the following SCSS:
.compact-input {
.mat-form-field-flex {
padding-top: 0;
}
.mat-form-field-wrapper {
padding-bottom: 0;
}
.mat-form-field-underline {
bottom: 0;
}
}
Only tested for standard appearance though.
Don't forget to add encapsulation: ViewEncapsulation.None to your component.
If you put the SCSS in the global styles, you might need to add some !important's.
.mat-form-field-infix{
display: block;
position: relative;
flex: auto;
padding: 0;
border-top: 0px solid transparent !important;
}
you can add important in css
You can add height:4em to mat-form-field as such:
<mat-form-field
class="height-4em"
appearance="outline"
>
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi">
</mat-form-field>
dont use ::ng-deep
this is simple.. add this to your css file
mat-form-field{
margin-bottom: -1.25em
}
By changing the font size with material theme you will get smaller input
$typography: mat-typography-config(
$input: mat-typography-level(14px, 1.125, 400),
);
#include mat-core($typography);
I had a similar problem w/ mat-fab button when using it together w/ mat-spinnner. Whenever the spinner would be "activated" the elements around would shift down. The problem was w/ .mat-fab .mat-button-wrapper which comes from an embedded wrapping span element of mat-spinner after rendering.
Setting,
::ng-deep .mat-fab .mat-button-wrapper {
padding: 0;
vertical-align: middle;
}
solved the problem. The vertical-align is not needed but aligns nicely the spinner w/in the mat-fab button.
Is there any way to style the text message within an ionic 2 toast?
I have tried this:
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true
});
toast.onDismiss(() => {
console.log('Dismissed toast');
});
this.nav.present(toast);
}
But clearly you can't use html in the text so I am guessing the answer to my question is no?
You must add 'cssClass: "yourCssClassName"' in your toastCtrl function.
let toast = Toast.create({
message: "Some text on one line. <br /><br /> Some text on another line.",
duration: 15000,
showCloseButton: true,
closeButtonText: 'Got it!',
dismissOnPageChange: true,
cssClass: "yourCssClassName",
});
than you can add any feature to the your css class. But your css feature went outside the default page'css. Exmp:
page-your.page.scss.name {
//bla bla
}
.yourCssClassName {
text-align:center;
}
I was able to achieve a toaster color change by adding a custom class on the toaster create
let toast = this.toastCtrl.create({
message: 'Foobar was successfully added.',
duration: 5000,
cssClass: "toast-success"
});
toast.present();
}
In that pages scss file i then went outside the default nested page name ( because the toaster is NOT inside the root of ion page name thing). And all though this is a bit hacky i just explicitly targeted the next div element after the custom class that i added
.toast-success {
> div{
background-color:#32db64!important;
}
}
I say its hacky because you have to use the !important on it. You can avoid the !important by wrapping the .toast-success with .md,.ios,.wp{...
You can override the style default by overriding the main toaster variables in the theme/variables.scss file.
$toast-ios-background:(#32db64);
$toast-md-background:(#32db64);
$toast-wp-background:(#32db64);
This will only override the default value though and not a custom value. there are a few more variables that can be styled as well.
First, import toast controller from ionic-angular and make object of that in constructor.
import { ToastController } from "ionic-angular";
constructor(private _tc: ToastController) {
}
After that wherever you want to show your toast message write that.
let options = {
message: "Your toast message show here",
duration: 3000,
cssClass: "toast.scss"
};
this._tc.create(options).present();
Here is my scss:
.toast-message {
text-align: center;
}
Or you can check best example from this link. I think it will help you. :)
Or else check the answer on this link.
If you define your own css class in app.scss (not in page.scss)
you can style it with .toast-wrapper and .toast.message
No need to use > div{
Example:
.yourtoastclass {
.toast-wrapper {
background: blue;
opacity: 0.8;
border-radius: 5px;
text-align: center;
}
.toast-message {
font-size: 3.0rem;
color: white;
}
}
in theme/variables.scss you can make a default
Example (red and little transparent):
$toast-width: 75%; /* default 100% */
$toast-ios-background: rgba(153, 0, 0, .8);
$toast-md-background: rgba(153, 0, 0, 0.8);
Ionic 2 provide a very useful way to override their component style you can override the toaster SASS variable in src/theme/variables.scss by adding
$toast-ios-title-color: #f00 ;
$toast-md-title-color:#f00;
this will override the default style please refer to this Overriding Ionic Sass variable
You can accomplish, however you need to modify the toast component template itself.
Via explorer:
\node_modules\ionic-angular\components\toast\toast.js
Change line 194 (template):
{{d.message}} to <div [innerHTML]='d.message'></div>
You should be able to change any of the message styling in the css using .toast-message selector:
.toast-message {
font-family: Helvetica,
color: red
}
Or, if you look at the docs (http://ionicframework.com/docs/v2/api/components/toast/Toast/) there is a cssClass property you can use to assign your toast a specific class and then style that.
Change toast background color and opacity:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'changeToast'
});
and add app.scss:
.changeToast{.toast-wrapper {opacity: 0.6; border-radius: 5px !important; text-align: center; background: color($colors, primary);}};
It's used with .toast-message
I tried all above, still didn't work, therefore I come across a new solution, you need cssClass outside of page css declaration:
let toast = this.toastCtrl.create({
message: msg,
duration: 3000,
position: 'bottom',
cssClass: 'toastcolor'
});
post-list.scss like this
page-post-list {
}
.toastcolor .toast-message {
background-color:skyblue;
}
Not sure about old Ionic versions, but in Ionic 5 you can't directly change inner CSS since it's encapsulated in the shadow
<ion-select>
#shadow-root
<div class="toast-container" part="container">
...
</div>
</ion-select>
so, to change .toast-container (for example) in your cssClass you should use:
.my-custom-class::part(container) {
flex-direction: column;
}
.my-custom-class {
.toast-container {
flex-direction: column; // will not work
}
}
I'm using ionic v5 with angular and
according to: https://ionicframework.com/docs/api/toast#css-shadow-parts
you can do something like this:
::ng-deep{
ion-toast::part(container) {
...
}
ion-toast::part(message) {
...
}
}
I created jqueryui dialog $('#mydialog').dialog({...});
I want to set titlebar attributes. I know I can do this with CSS and works fine:
.ui-dialog-titlebar {
font-size: 10pt;
}
What if I want to do it for a specific dialog? I have tried below but it doesn't work. Thanks!
#mydialog.ui-dialog-titlebar {
font-size: 10pt;
}
So here is how to do it:
http://jsfiddle.net/7VW4V/
Basically add an id to the dialog widget (http://api.jqueryui.com/dialog/#method-widget) as follows:
$('#dialog').dialog('widget').attr('id', 'dialogId');
Then the CSS is straightforward
#dialogId .ui-dialog-titlebar {
background:red;
}