I want to set a border-radius to the img tag inside <ion-img>.
I've tried to add
img { border-radius: 16px}
in .scss component style, in variable.scss and in global.scss but did not work.
Try to add your CSS class to <ion-img>.
HTML - home.page.html
<ion-img [src]="img" class="your-class"></ion-img>
CSS - home.page.scss
.your-class {
border-radius: 16px !important;
overflow: hidden;
}
Related
I want it to have a standart design on ionic input elements. I have an ion-select element and this element inside select box text align-left but I want select-icon align right. I do on HTML element like that: https://ibb.co/99YXc8B. But I am not doing in the sccs style. I try a lot. Stackblitz link: https://stackblitz.com/edit/ionic-fdqf4z?file=pages%2Fhome%2Fhome.scss
Replace your CSS with this CSS code.it will works.
[inline-icon] {
font-size: 2em !important;
padding-right: 3px !important;
color: #808080ba !important;
}
.try{
color: red;
width:100%;
}
ion-select
{
max-width: 100%;
}
I am trying to override existing sass styling of ion-card, by changing the headers padding to something that fit my app.
I did the following:
ion-card-header{
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
But nothing changed. I tried to add a background color to check it is getting the styling:
ion-card-header{
color: red;
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
And the color changed to red. But the card-header-md is not changing. I need to change it on iOS and Android.
Here is a stackblitz for it.
The issue is that the card-header-md class is at the same level as the ion-card-header class. So this should work:
ion-card-header {
&.card-header-md {
padding-right: 20px
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
I've removed the !important because I think you don't actually need them (just tried in a new stackblitz demo and it's working fine without them).
I'm trying to change the color and the size of the letter inside the ion-toolbar but without success, what I've tried so far:
ion-toolbar {
--background: var(--custom-primary); //works
--color: #FFFFFF; //works letters, not icon
ion-buttons {
font-weight: bold; //works
--icon-font-size: 10px !important;
}
ion-back-button {
--icon-font-size: 30px !important;
}
}
You can directly style your toolbar in the template. E.g.:
<ion-toolbar color="green">
...
</ion-toolbar>
Check out these docs https://ionicframework.com/docs/theming/advanced#themes. Theming ionic core components like the ion-toolbar is a little different.
I'm using an ionic refresher to refresh content on a page in my application. However, when I pull up the ion-refresher, background does not get fully set to the color I want.
This is a CSS class I'm applying to the ion-refresher:
ion-refresher {
background-color: #dedede;
}
ion-refresher-content {
background-color: #dedede;
}
And this it what the result looks like:
How do I remove the white gap between the ion refresher and the main content?
On Ionic 4, this CSS worked for me:
ion-refresher-content {
padding-bottom: 200px;
background-color: yellow;
.refresher-pulling {
position: fixed;
top: 50px;
}
}
The padding-bottom: 200px; fills up the space to show the yellow color, but it also introduces a new issue. The refresher arrow disappears! In order to keep the arrow in place and make it function normally, the .refresher-pulling and its corresponding styles are added. This way, now the app background color shows without any white gaps and also the spinner stays in place.
Hope this helps someone.
When you pull up, one div was been created called fixed-content
For remove the gap just add .fixed-content in your .scss
Example:
.fixed-content{
background:#dedede;
}
This is what got it working for me.
ion-refresher-content {
padding-bottom: 100px;
background-color: #dedede;
}
#devner's solution is not working correctly with iPhone X and kind (i.e. devices with safe-area-inset).
Proper solution (Ionic 4):
ion-refresher-content {
position: relative;
padding-bottom: 200px;
background-color: var(--base-background-color-body);
.refresher-pulling, .refresher-refreshing {
position: relative;
top: 30px;
}
}
Appendix: best UX on my opinion can be achieved with next HTML:
<ion-refresher slot="fixed" pullFactor="0.5" (ionRefresh)="onPullToRefresh($event)">
<ion-refresher-content
pullingIcon="refresh"
refreshingSpinner="crescent"
></ion-refresher-content>
</ion-refresher>
I have a submission button for a form. I use a sprite as the background, and so on hover I shift the background over the width of my button to get the hover effect. However, this is not working.
This is my html:
<form class="a">
<All the other Fields...>
<p><input type="submit" value="Submit"/><p>
</form>
And my css:
.a input[type="submit"] {
margin-top: 15px;
background: url(btn.png) no-repeat;
width: 108px;
height: 42px;
border: none;
color: transparent;
font-size: 0;
}
.a input[type="submit"]:hover {
background: url(btn.png) no-repeat 109 0;
}
.a input[type="submit"]:hover {
background: url('btn.png') no-repeat 109px 0px; /*use 109px */
}
and check your background image path.
Background-position: for x: %|px|left|center|right and for y %|px|top|center|bottom
It could be
.a input[type="submit"]:hover {
background: url(btn.png) no-repeat;
background-position: 109px 0px; // left 109px, top 0px
}
Or
.a input[type="submit"]:hover {
background: url(btn.png) no-repeat 109px 0px;
}
Also make sure your image path is right. Right now your image should be at the same folder where your css is, according to url(btn.png).
You're missing px on your position. See this fiddle for a working example