I'm new to Ionic. I'm trying to change the width of a toast.
It is not working and keeps displaying the default toast!
I created a css file called toast.css in /theme/custom/
. {
width : 20px;
}
Method Looks like so:
toasterExe(text : string) {
const toast = this.toastCtrl.create({
message: text,
position: "top",
duration: 3000,
cssClass: "../../theme/custom/toast.css"
});
toast.present();
}
in variables.scss
add this line
$toast-width:80%
Related
I want to give alert controller style in ionic 4.these is my demo code,
async presentalert() {
const alert = await this.alertCtrl.create({
header: ' DO YOU WANT TO CANCEL',
message: 'DO YOU WANT TO CANCEL',
cssClass: 'alertCancel',
mode: 'ios',
buttons: [
{
text: 'NO',
role: 'cancel',
cssClass: 'alertButton',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'YES',
cssClass: 'alertButton',
handler: () => {
console.log('Confirm Okay');
}
}
]
})
await alert.present();
}
and i tried to apply scss in global.scss
.alertCancel{
--background: red;
}
.alertButton {
background-color: white !important;
}
I have tried every possible way to give css in alert controller but it s not working so please help me I am stuck here.
--background is a css variable of the component ion-alert, therefore do the following in the variables.scss
ion-alert
{
--background: red !important;
}
For reference:
https://ionicframework.com/docs/theming/css-variables#ionic-variables
If you wish to style your alert using defined cssClass instead of the component ion-alert then add the following code to your variables.scss
.alertCancel{
--background: red;
button.alertButton{
color: white;
}
}
Result
Since, ion-alert do not provide CSS Custom Properties to style alert buttons. I suggest you to use defined cssClass to style your alert rather than ion-alert when you want to style your alert buttons too.
I was having the same issue and this worked for me without needing to use "!important"
in the variables.scss I added this:
#media (prefers-color-scheme: light){
body{
--ion-background-color: rgb(240, 248, 240);
}
ion-alert{
--ion-background-color: #ffffff;
}
}
This allows having a general color for the background of the app but changes it for every alert (on this case, on the light theme) :)
I have an alert where I have some text and one ionicon and I want to change its color and adjust its size and position (center) and I created a css class tried to apply it but it doesn't work, even thought HTML seems to work, I used the <b> tag just fine.
My code:
async presentAlertError(data) {
const alert = await this.alertController.create({
header: 'Confirmation',
message: '<ion-icon name="close" class="custom-icon-notfound" > </ion-icon>' + "Registration " + data.statusText,
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: (aux) => {
console.log('Confirm Cancel: aux');
}
}, {
text: 'Scan Next',
handler: () => {
this.scanCode();
console.log('Confirm ');
}
}
]
});
await alert.present()
Should I do this in a different way?
The ion-alert isnt displayed in the home page or (whatever page/component you have the alert on) shadow DOM so styling wont affect it if you add it there, you have to add the styles to an element which is in the same scope as the alert. I added the class to variables.scss as that has the highest scope:
variables.scss-
.secondary {
color: #A0A !important;
font-size: 2em !important;
}
.custom-icon-notfound {color: red}
also need added !important so it ignores its previous styling.
I'm trying to make the default Ionic Alerts larger. I'm developing an app that needs to have easy touch points and the default alerts are too small for what I'm needing.
I've tried enlarging the font as well as expanding the width of the alerts but nothing seems to actually make the alerts larger.
Any easy/best ways to do this?
AlertController supports custom classes which could be placed in your component's scss file and there you can do necessary alterations.
For example in your component's ts file you can have this method that creates alert with reference to custom class "scaledAlert":
delete() {
let confirm = this.alertCtrl.create({
title: "Are You Sure?",
cssClass: "scaledAlert",
message: "this will remove image from your image gallery",
buttons: [
{
text: "Cancel",
handler: () => {
console.log("Canceled delete");
}
},
{
text: "Confirm",
handler: () => {
console.log("deleting...");
this.deleteImageFromGallery(this.image)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
this.viewCtrl.dismiss();
}
}
]
});
confirm.present();
}
Now in the scss file you add class to style as you need to scale the controller, such class goes after your page or component:
home-page {
.item {
min-height: 2rem; /* <- this can be whatever you need */
}
ion-label {
margin: 0px 0px 0px 0;
}
.item-content {
padding-top: 0px;
padding-bottom: 0px;
margin-top: -12px;
margin-bottom: -12px;
height: 50px;
}
}
.scaledAlert {
transform: scale(1.5);
}
Here I used just naive "scale" function which may require you to add some cross browser compatible versions of it. But you should achieve what you want with it (it worked in my app without issues).
Alternatively you can override default styles using saas variables: https://ionicframework.com/docs/api/components/alert/AlertController/#sass-variables
You will have to alter them in theme\variables.scss" which is located in your project's folder
See more here: https://ionicframework.com/docs/theming/overriding-ionic-variables/
And third option is indeed to check elements' style via devtool and attempt to override those classes. But I don't like that way, feels a bit more hacky.
Some of the styles for alert are not getting updated if written in component SCSS file. The styles need to be written in the global scss file.
I have added a toast in my project using the below code in my newrecord.ts
constructor(private toastCtrl: ToastController,
private _listProduct : ListproductService,
private _deleteProduct : DeleteProductService,
public navCtrl: NavController,public navParams: NavParams,
public loadingCtrl: LoadingController,
private datePipe: DatePipe) {
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.mytoast = this.toastCtrl.create({
message: 'Data loaded successfully',
duration: 3000,
position: 'top'
});
this.initializeItems();
}
and inside ngOnInit() I have called my toast like this this.mytoast.present();
It is working perfectly fine but instead of black can I use any other background color for my toast?
I have read cssClass property but I don't know how to use it
You could define another background color by overriding a Ionic Sass Variables in your variables.scss
In case of toast background you could define for example white or #ffffff like following:
$toast-ios-background: #ffffff; // Apply for iOS
$toast-md-background: #ffffff; // Apply for Android
$toast-wp-background: white; // Apply for Windows
You could find the all list of sass variables you could override in the documentation:
https://ionicframework.com/docs/theming/overriding-ionic-variables/
In case you would like even more flexibility or to set other styles, you could set a custom css property to your toast with the cssClass option
For example:
this.mytoast = this.toastCtrl.create({
message: 'Data loaded successfully',
duration: 3000,
position: 'top',
cssClass: 'myCustomCss'
});
Then you could modify it in your stylesheets, like in app.component.scss
.myCustomCss {
// The styles you would like to apply
}
See ToastController API documentation:
https://ionicframework.com/docs/api/components/toast/ToastController/
But when it goes to the background of the toast, first try with the variables ;)
I am developing a Task pane word add-in using JavaScript API, I have used below code to create a jQuery dialogbox dynamically using a function:
function myConfirm(dialogText, okFunc, cancelFunc, dialogTitle) {
$('<div style="padding: 10px; max-width: 500px; word-wrap: break-word;">'
+ dialogText + '</div>').dialog({
draggable: true,
modal: true,
resizable: false,
width: 'auto',
title: dialogTitle || 'Confirm',
minHeight: 75,
position: {
my: "center",
at: "center",
of: window
},
buttons: {
OK: function() {
if (typeof(okFunc) == 'function') {
setTimeout(okFunc, 50);
}
$(this).dialog('destroy');
},
Cancel: function() {
if (typeof(cancelFunc) == 'function') {
setTimeout(cancelFunc, 50);
}
$(this).dialog('destroy');
}
}
});
}
But when i open it first time to call myConfirm function, the page scroll goes to top and when i scroll down to click on dialog-box it again send the scroll back to top then i need to again scroll down, now i am able to click on dialog-box buttons. it works fine after first.
I need to set dynamically text of box and function on button clicks so i am creating it dynamically. I have also test it on Internet Explorer, it's working fine.
Please advice how i can fix it for word add-in.
You can try below code when you are calling your function :-
onclick="myConfirm();return false;"
Just add "return false;" after your function name as shown above.
Edit 1:-
Or you can return false from your function as well.
Edit 2 :-
$form.show().dialog({
close: function (event) { event.preventDefault(); }
resizable: false,
etc....
});