Is it possible to disable the popup backfade?
I tried this:
My popup controller:
var popupInvalid = $ionicPopup.alert({
templateUrl: 'templates/popup-template-invalid.html',
cssClass: 'success-popup',
scope: $scope
})
Sass:
.success-popup{
.backdrop {
opacity: 0 !important;
}
}
But I did not succeed
Thanks
Unfortunately the backdrop is a sibling of .popup-container, which then contains your popup. So the only option you have is to globally modify the .backdrop class, e.g.:
.backdrop
{
background-color: transparent;
}
Check this example: http://play.ionic.io/app/8f14ab72d922
Unfortunately this influences all other popups in your application as well.
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'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 am trying to remove the status bar and keep the resize icon in tinymce just like a normal text area resizer. Any idea ?
elementpath
This option allows you to disable the element path within the status bar at the bottom of the editor.
Type:
Boolean
Default Value:
true
Possible Values:
true, false
Example
tinymce.init({
selector:'textarea',// change this value according to your HTML
elementpath:false
});
TinyMCE does not support what you are trying to do via configuration. The resize handle is only visible via the status bar.
Unfortunately, there is no way to do it via component settings. But you can try and change css:
your-tiny-mce-textarea .mce-path.mce-flow-layout-item {
display: none !important;
}
UPD: This one seems more pretty:
your-tiny-mce-textarea.mce-statusbar {
border: 0 !important;
}
your-tiny-mce-textarea.mce-path {
display: none !important;
}
Maybe this will help someone in future, you can remove the entire status bar with the following option
tinymce.init({
selector: 'textarea', // change this value according to your HTML
statusbar: false
});
https://www.tiny.cloud/docs/configure/editor-appearance/#statusbar
I'm having some issues trying to remove the reveal modal background
The documentation gives several options but none of them work:
http://foundation.zurb.com/docs/components/reveal.html
Remove background:
<div class="reveal-modal-bg" style="display: none"></div>
Optional Javascript Configuration:
Reveal options can only be passed in during initialization at this time. However, you can bind to the open, opened, close, and closed events.
I tried returning this object literal in the event callback, but that doesn't work:
$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
return {bg_class: 'noBackground'}
});
{
animation: 'fadeAndPop',
animation_speed: 250,
close_on_background_click: true,
dismiss_modal_class: 'close-reveal-modal',
bg_class: 'reveal-modal-bg',
root_element: 'body',
bg : $('.reveal-modal-bg'),
css : {
open : {
'opacity': 0,
'visibility': 'visible',
'display' : 'block'
},
close : {
'opacity': 1,
'visibility': 'hidden',
'display': 'none'
}
}
}
Can you please help?
thx,
Don't use display: none, just use css and set the background color to transparent in your css (you need to load your css after foundation's in order to override its styles) - though I'm not sure why you'd want to?:
.reveal-modal {
background-color: transparent;}
Not the nicest option, but a quick fix would be to use:
style="display: none!important"
For the "reveal-modal-bg".
I'm using the jeditable plugin for making some values editable. I noticed that when a value is empty the default text 'Click top edit' appears which I don't want. But I still want to make that field editable too. How to manage this?
I noticed a suggestion at http://www.datatables.net/forums/discussion/5865/jeditable-and-default-click-to-edit/p1, but that does not seem to work - at least not for me; when using the placeholder : "" the field is not editable anymore.
My related code:
$('.edit').editable('edit_save.php', {
cancel : 'Cancel',
submit : 'OK'
});//$('.edit').editable('jeditable_save.php', {
Without any text to fill it, the editable element needs to be an inline block with height and width like this:
.edit {
border: 1px solid red;
display: inline-block;
min-height: 20px;
min-width: 100px;
}
and set a blank placeholder like you mentioned:
$('.edit').editable(function (value, settings) {
return value;
}, {
cssclass: 'editing',
placeholder: '',
});
See this fiddle http://jsfiddle.net/chrisdillon/37JqF/
I tried add this row: placeholder:'
&
nbsp;' and it works.
If you can add this row, you see your input is empty.
$('.edit').editable('Something', {
something,...
placeholder:' ',
})