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.
Related
I want create a drop down menu or popover within ionic toolbar. I tried with several ways but can not solve. Its always hidden like bellow,
I trying css like bellow,
.popover{
border: 1px solid black;
height: 350px;
width: 150px;
position: absolute;
z-index: 99999999;
background: yellow;
}
ion-header{
contain: none;
}
ion-toolbar{
contain: none;
}
Please give me a suggestion or an alternative idea. Please do not give any predictive answer if you are not familiar with ionic.
I don't know about Ionic 4 but on Ionic 5, a solution would be this when you debug on the console :
ion-toolbar {
contain: none;
.toolbar-container {
overflow: visible;
contain: none;
}
}
However, the .toolbar-container is an element in the shadow dom of the <ion-toolbar> component and its overflow and contain properties are not css variables and there is no part attribute on this element neither. So there is actually no way to override those properties.
I'm considering using this package, but for me it seems like overkill to use js and timeout for setting a pretty simple style... :
https://www.npmjs.com/package/shadow-dom-inject-styles
I had a similar problem when I had to make a searchbar overflow underneath the header (design thing). I was struggling a while and it popped in place suddenly when I place the searchbar outside of the toolbar and gave it position absolute:
<ion-head>
<ion-toolbar>
<!-- My stuff here -->
</ion-toolbar>
<ion-searchbar></ion-searchbar>
<ion-header>
My css looks like this:
ion-toolbar {
display: flex; // I need this for something else, but maybe has an influence
}
ion-searchbar {
padding: 0 1em .5em 1em;
transform: translateY(-50%);
z-index: 99999;
position: absolute;
}
Hope it helps somebody.
In case anyone is still looking for the solution. Here is how I managed to fixed it in react. It's a bit hacky solution, but most likely the only one ATM.
First we need to style the toolbar (pass a className or style to component:
.your-toolbar-classname {
overflow: visible!important;
contain: none!important;
}
Then we have to also style the shadow-root parts. Se we can use the useEffect after the header is mounted and set the style
// Header.tsx
...
useEffect(() => {
const style = document.createElement('style');
style.innerHTML =
'.toolbar-container { overflow: visible!important; contain: none!important; }';
toolbarRef.current.shadowRoot.appendChild(style);
}, []);
...
Just use ion-menu, its a build in ionic component
https://ionicframework.com/docs/api/menu
There is also ion-popover
You should look at the ionic docs before posting on stack
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 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:' ',
})
i am currently working on a project which is taking an active check feed from Nagios Check_mk and displaying on a text widget. i am trying to get the widget to change colour, working through the workshop page i am stuck with the coffee script, it doesn't appear to have any effect when the value is changed. here is what i have
alert.coffee
class Dashing.Alert extends Dashing.Widget
ready: ->
# This is fired when the widget is done being rendered
onData: (data) ->
# Handle incoming data
# You can access the html node of this widget with #node
# Example: $(#node).fadeOut().fadeIn() will make the node flash each time data comes in.
#accessor 'value', Dashing.AnimatedValue
#accessor 'isTooHigh', ->
#get('value') > 200
alert scss
.widget-alert {
background: #00ff99;
font-size: 65px;
font-weight: bold;
}
.danger {
background: #ff1a00;
}
all other files are exactly as detailed in the workshop page: any help greatly appreciated.
Basically the change of color or animated flashing of color was handled by the scss #keyframe rule, you must bind it to a selector, otherwise the animation will have no effect
Here's some example
$background-alert-color-1: #FFFF66;
$background-alert-color-2: #FF9618;
$text-alert-color: #fff;
#-webkit-keyframes status-alert-background {
0% { background-color: $background-alert-color-1; }
50% { background-color: $background-alert-color-2; }
100% { background-color: $background-alert-color-1; }
}
.widget.status-alert {
color: $text-alert-color;
background-color: $background-alert-color-1;
#include animation(status-alert-background, 2s, ease, infinite);
.icon-alert-sign {
display: inline-block;
}
.title, .more-info {
color: $text-alert-color;
}
For some example and reference (also for the coffescript) you can check this one dashing_zabbix
I'm using JQTOUCH and in JQTOUCH several of the links are being loading via AJAX and then sliding in. The problem is that there is no loading indication provided to users.
I'd like a way to add a Loading class with an AJAX spinner, when ever the an ajax call is loading, and have the class removed when the loading is done, and the page is displayed.
Any ideas?
the showPageByHref() answer is partially correct.
But, instead of
$('body').append('<div id="loadinginprogress">Loading...</div>');
You need
$('.current').append('<div id="loadinginprogress">Loading...</div>');
Body is too general for jqtouch, need to be specific to the currently displayed DIV-page
showPageByHref() function in jqtouch js is a good start. i added it right into ajax call so the please wait will not flicker when you click on link that is already loaded etc.
In short - add loading div (id loadinginprogress in exmaple) right before the ajax call and remove later "success" or "error". the ajax call section would look something like that (shortened it ):
function showPageByHref(href, options) {
...
if (href != '#'){
$('body').append('<div id="loadinginprogress">Loading...</div>');
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data, textStatus) {
$('#loadinginprogress').remove()
var firstPage = insertPages(data, settings.animation);
if (firstPage)
{
if (settings.method == 'GET' && jQTSettings.cacheGetRequests && settings.$referrer)
{
settings.$referrer.attr('href', '#' + firstPage.attr('id'));
}
if (settings.callback) {
settings.callback(true);
}
}
},
error: function (data) {
$('#loadinginprogress').remove()
if (settings.$referrer) settings.$referrer.unselect();
if (settings.callback) {
settings.callback(false);
}
}
});
}
...
}
css for loading div would be something like:
#loadinginprogress {
-webkit-border-radius: 10px;
background-color: rgba(0,0,0,.5);
color: white;
font-size: 18px;
font-weight: bold;
height: 80px;
left: 60px;
line-height: 80px;
margin: 0 auto;
position: absolute;
text-align: center;
top: 120px;
width: 200px;
z-index: 5000;
}
This is the basic behavior if your links are li class="arrow" elements. how are you displaying your links and where do you want the loading-spinner to display?
Thank you for your different posts. They helped me a lot.
I have a solution to propose without patching the jQtouch code on which jQTouch relies.
It uses jQuery ajax capabilities.
$(document).ready(function() {
...
$('#jqt').ajaxStart(function() {
console.log("ajaxStart");
...
}).ajaxSuccess(function() {
console.log("ajaxSuccess");
...
}).ajaxError(function() {
console.log("ajaxError");
....
});
....
});
more details available in this jQuery doc page.
You could add a custom event handler, and trigger the loading.gif everytime the click on the specific element was done.
I just answered Darin Parker's question. Just check it out it may help you.