I have trouble finding the correct css code for changing the looks of a toast in Ionic 4.
In Ionic 3 you could use padding in css to change the look of a toast.
--min-height changes the height but it also places the message text to the top of the toast which I don't want.
I have this in my global.scss:
ion-toast.toast-mess {
text-align: center;
color: var(--ion-color-light);
font-size: 30px;
--border-radius: 30px;
padding: 50px;}
In the above code, padding is not taken into account, all other parameters work fine.
The default .toast-message says padding is available because it contains some default values.
How can I use padding again in custom css code, or something similar ?
Thanks
have you tried with
--padding-end
--padding-start
--padding-top
--padding-bottom
Related
I'm trying to change the CSS feature vue-intro tutorial for my web app. I'm having trouble with how to change the tooltip button color, themes in vue-intro.js.
I want to change Next button color. so, how to change CSS in nuxt.js project.
I added the below code as a plugin. but I can't change the CSS
import Vue from 'vue'
import VueIntro from 'vue-introjs'
import 'intro.js/introjs.css'
Vue.use(VueIntro)
Here's an SCSS utility to generate the CSS for it:
$btn-color: #f50;
$text-color: white;
a.introjs-nextbutton {
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
text-shadow: none;
color: $text-color;
&:hover {
background-color: lighten($btn-color, 4.2%);
border-color: $btn-color;
color: $text-color;
}
&:focus {
box-shadow: 0 0 0 0.2rem transparentize($btn-color, .42);
background-color: $btn-color;
border-color: darken($btn-color, 4.2%);
color: $text-color;
}
}
I have done something similar before. I think the only way to do it is to overwrite the className or not import the intro.css (make your own). You need to "inspect element" to find out the introJS className from the library. Basically their className start with prefix introjs-something.
I can even do things like display none for previous button or change its color. See picture below.
Click this to see My Inspect Element to find introjs classes
I want to change the default value of global left ion-padding.
Adding --ion-padding-start: 20px in variable.scss under :root selector is not working. I don't want to explicit mention the left padding to the components, as doing this applies the left padding. I want to set the value for global left padding.
--ion-padding-start will not work if we want to change the default value of padding. I added these lines of code in global.scss file :
.ion-padding,
[padding] {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 60px;
padding-right: 60px;
}
In this way we can change the default value of global left padding in ionic project.
Globally you can change only --ion-padding, now not support for --ion-padding-start: 20px
You have to manually change all component level or particular scss file for page
--ion-padding-start: 20px
So I'm designing the website for my dad's company and I'm trying to get rid of the whitespace above the header on the page. I tried making the margins 0 and paddings 0 but nothing is changing. Here is my code and a link to the website:
header {
font-size: 20px;
position: relative;
background-color: #DDDDDD;
height: 150px;
}
The problem is the the w3-sidebar-class you are using inside the page. It sets the top margin to a negative value. In order to analys these kind of problems, I suggest you start from a black html page and add new elements to it step by step. Then you can see which changes have which effect.
I've made simple application with dojo.
I took the exact same combo tree (cbtree) and put it once inside accordion and once first on page.
I don't understand why inside the accordion I get different cbTree (it looks really bad)
Here is online example of the problem :
http://77.235.53.170/cbTree/cbTree.htm
The problem is at your main.css, you have
#leftCol img {
width: 100%;
}
Which overwrites
.dijitFolderOpened, .dijitIconFolderOpen, .dijitIconError {
background-image: url("../../icons/images/commonIconsObjActEnabled.png");
width: 16px;
height: 16px;
}
You need resolve this in main.css by either removing your style, or changing it to a more specific rule; i.e. instead of #leftCol img, use #leftCol .yourClass.
I have a simple question. I want to style the header bar in jQuery mobile. Specifically I want to set the height of the bar and add a background image to it. How can I do that?
Thank you in advance
This is how I handled it. Instead of actually putting an H1 inside the data-role="header", just directly insert a
<div class="ui-title"></div>
and then add something like this to your custom CSS.
.ui-header .ui-title{
margin: 0.3em 70px 0.7em 10px;
background-image:url(../images/logo-page.png);
background-repeat:no-repeat;
background-position:0 0px;
width:178px;
height:40px;
}