I'm trying to align the text centrally inside the ion-list items, using text-align using text-align: center inside the following css code:
.my-profile-bar-content{
padding-top:34px ;
height: 250px;
text-align: center;
}
But I don't know why I'm getting the first item (the 'Login' one) out of being centered with the others, here is the screenshot:
And this is my used HTML code:
<ion-popover-view>
<ion-header-bar class="my-profile-bar-header">
<span class="my-profile">
<img src="../img/no-face.png">
<h1 class="title" style="margin-top: 20px">My Full Name</h1>
</span>
</ion-header-bar>
<ion-content class="my-profile-bar-content">
<ion-list>
<ion-item menu-close ng-click="login()">
Login
</ion-item>
<ion-item menu-close href="#/app/search">
Search
</ion-item>
<ion-item menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</ion-popover-view>
</script>
Any help will be much appreciated.
With the help of Developer's Tools (F12 or right click -> last option) check what additional style rules are applied to this particular menu. It is worth to note that Login button is a button, not href, meaning other style rules for buttons may have interfered.
Related
I am having trouble positioning this picker at the top of the screen. I have tried overriding many css properties with no success.
I am unable to override the required classes. .sc-ion-picker-md-h
<ion-header>
<ion-toolbar color="custom">
<ion-buttons slot="start">
<ion-menu-toggle><ion-icon name="menu-outline" style="font-size: 30px; color: white !important;"></ion-icon>
</ion-menu-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-item>
<ion-label>Notification Time</ion-label>
<ion-grid>
<ion-row justify-content-center align-items-center>
<ion-datetime display-format="h:mm A" picker-format="h:mm A" value="1990-02-19T07:43Z" style="height: 100% !important;"></ion-datetime>
</ion-row>
</ion-grid>
</ion-item>
</ion-content>
I managed to get it on top by putting this in the theme/variables.css file:
/** Ionic CSS Variables **/
.picker-wrapper.sc-ion-picker-md {
bottom: auto;
top: 0;
}
(I tested using React, but I guess this should work the same way using Angular or pure js)
I have tabs page app. I have a background image like so. How can I have transparent tabs as shown below?
home.html
<ion-content class="content" fullscreen>
<ion-grid>
<ion-row class="ion-margin-top row1">
<ion-col size="12" class="ion-text-center">
</ion-col>
</ion-row>
<ion-row class="ion-margin-top row2">
<ion-col size="6" *ngFor="let b of buttons;" class="padding">
<app-home-root [data]="b"></app-home-root>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
home.scss
ion-content {
--background: url('/assets/img/stella/background/background.png') no-repeat 100% 100%;
}
tabs.page.html
<ion-tabs>
<ion-tab-bar class="tab" slot="bottom" translucent="true">
<ion-tab-button (click)="profileAction()">
<ion-img [src]="myProfileSrc"></ion-img>
<ion-label>
My Profile
</ion-label>
</ion-tab-button>
<ion-tab-button (click)="openBooking()">
<ion-img [src]="bookNowSrc"></ion-img>
<ion-label>Book Now</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
This is what I have now with translucent="true"
Ion-content doesn't continue under the tabs (this can be seen when you inspect it when you run it in a browser), so making the tabs transparent would only show you the background color of the app. I don't know if it is possible to even make it transparent, but because it makes no difference you could always just apply a background color to ion-tabs (the same color as your ion-content is).
Edit:
And if you want to remove the border too, this should be enough:
ion-tab-bar {
--background: #FFF;
border-style: none;
}
If you still see a border you can always add border: 0;.
I want to separate my <ion-checkbox> from <ion-label>. So the main issue is that I have to display additional informations if you click on the label, but you should not activate the checkbox. The checkbox should only be activated, if clicked on the "checkbox icon/checkbox square".
<div>
<ion-list>
<ion-item *ngFor="let list of list">
<ion-label (click)="showAdditionalInformations()">{{list.item.free_text}}</ion-label>
<ion-checkbox *ngIf="list.item.checkbox==true"></ion-checkbox>
</ion-item></ion-list>
</div>
Can someone help me?
This does not work with Ionic 4 because Shadow Dom creates a button element that overlays the label element and captures the click events.
A workaround for Ionic 4 is to wrap the ion-checkbox with a span, and make it relative.
This way, the button in the Shadow Dom will fit only this new span, keeping the label free to asign a custom click event.
<span class="checkbox-container">
<ion-checkbox slot="end" formControlName="accept"></ion-checkbox>
</span>
.checkbox-container {
position: relative;
}
For ionic-4, give the property "position:relative" to ion-checkbox. It works !
ion-checkbox {
position:relative;
}
You can try to add this piece of code to your CSS. It will hide the overlay which wraps both your checkbox and your label.
ion-checkbox .item-cover{
display:none;
}
This did the trick for me:
ion-checkbox {
.item-cover {
width: 70px;
}
}
For ionic 4 there is a workaround by using the start slot of ion-item as laid out here.
<ion-item lines="full">
<ion-icon slot="start" name="at" (click)="iconClicked()"></ion-icon>
<ion-label slot="start" (click)="labelClicked()">
This is a separately clickable label
</ion-label>
<ion-checkbox slot="end"></ion-checkbox>
</ion-item>
With lines="full" the bottom border is fixed.
For whoever gets here via Google like me, using Ionic 6 (2022) - I resolved this issue giving the label a z-index:3.
This also works for an ion-button slotted at end.
<ion-item>
<ion-label>Select/unselect all</ion-label>
<ion-checkbox slot="start" (ionChange)="selectAllFarmers($event)"></ion-checkbox>
<ion-button style="z-index:3" slot="end" (click)="exportSelectedFarmers(remoteFarmers)">Export selected</ion-button>
<ion-button style="z-index:3" slot="end" (click)="finaliseSelected()">Finalise farmers</ion-button>
</ion-item>
Credits: https://rubberchickin.com/how-to-fix-ion-checkbox-stealing-clicks-on-ion-item-elements/
I want to remove padding from my ion-item so that it can occupy the full width of the page.
Please look in the dev tools to see the padding around the ion-item.
<ion-content padding>
<ion-list>
<ion-item>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
</ion-list>
</ion-content>
The ion-item has a padding of 16px, when I inspect the ion-item and also on the class="scroll-content" there I found scss in the inspector with
ion-app.md [padding] .scroll-content {
padding: 16px;
}
If I remove this padding then ion-item can occupy the whole width by removing this padding, but When I use this in my scss file the padding is not removed.
For those who are using ionic 4, you should use Ionic CSS Utilties for padding
In short, you have to code this:
<ion-item class="ion-no-padding">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
If you want to remove inner paddding, use ion-item custom CSS properties:
ion-item {
--padding-end: 0px;
--inner-padding-end: 0px;
// here other custom CSS from documentation
}
You can solve ion-item padding different way...
First: Using ion-no-padding class
<ion-item class="ion-no-padding">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
Second: Using css or inline style
<ion-item style="padding:0px !important;">
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
Edit : As Ionic 5.X we must use CSS utilities by class instead of attributes ( ionic/BREAKING.md ).
I had to use custom CSS properties for ion-item
ion-item {
--inner-padding-bottom: 0;
--inner-padding-end: 0;
--inner-padding-start: 0;
--inner-padding-top: 0;
}
just give no-padding to ion-item it will remove the padding
<ion-item no-padding>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
Refer the ionic docs
Also had the same maddening problem. It turns out that ion-item has a few --inner-padding rules that need to be overridden to stop padding appearing on it's children
As well as adding the
class="ion-no-padding"
I also needed to add the following css style rule
--inner-padding-end: 0 !important;
Making the final element
<ion-item *virtualItem="let section" lines="none" class="ion-no-padding" style="--inner-padding-end: 0 !important;">
...
If you prefer not to add no-padding to every ion-item, and remove it for the whole app.
For ionic v4, you can add this to global.scss:
ion-item {
--padding-start: 0;
}
Source: https://ionicframework.com/docs/api/item#css-custom-properties
Removing padding from the content of the page solves the problem
<ion-content>
<ion-list>
<ion-item>
<ion-thumbnail>
<img class="imgmg" src="...">
</ion-thumbnail>
<h2>Text</h2>
</ion-item>
</ion-list>
</ion-content>
I have added the following code style="background-color: #C2A5A5 !important. But that has not worked for me. how can I add background color to ion-item?Thanks in advance.
<ion-item class="item-remove-animate item-avatar item-icon-right" style="background-color: #C2A5A5 !important" ng-repeat="detail in details" type="item-text-wrap" ng-controller="ChatsCtrl" ng-click="openShareModel(detail)">
<img ng-src="{{profilepic.profileimageurl}}">
<h2>{{detail.date | date :'fullDate'}}</h2>
<h2>{{detail.title}}</h2>
<p>{{detail.description}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>
<ion-option-button class="button-assertive" ng-controller="ChatsCtrl" ng-click="remove(detail.id)">
Delete
</ion-option-button>
</ion-item>
I want to share my solution:
I use the custom CSS properties of ionic 4, so if I want to change the background color I can create a new class called ".item-background-color" and change the color of the CSS property that I want to modify. For example:
my-page.page.scss
.item-background-color{
--ion-item-background:#015f01d5;
}
then, I only add my new class to the ionic item:
my-page.page.html
<ion-item class="item-background-color">
My item with new background color
</ion-item>
What is done is to change the variable that affects the color of the ionic item, so you can add all the classes you want, dynamically or not, and change the values of their respective variables. You can find information about the variables at CSS Custom Properties
I hope my answer is helpful to people who need to modify the CSS properties of ionic 4 components, sorry for my bad english and good luck!
Ionic is injecting an element inside the <ion-item> giving the element a structure of:
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item-content {
background-color:#ffffff;
}
The inline CSS you added is being applied to the element behind the element with the #ffffff background, so you can't see your background color.
Apply the background color to the .item-content element, as #ariestiyansyah recommended by adding the following CSS to the Ionic CSS file, or create a custom CSS file and include a <link> to it in the header, with the following:
.item .item-content {
background-color: transparent !important;
}
Here's the working demo.
Simply, use colors in variables.scss file (you can also define new colors) like that
$colors: (
primary: #f9961e,
secondary: #882e2e,
danger: #f84e4e,
light: #f4f4f4,
dark: #222,
newColor: #000000,
);
and in your html file:
<ion-item color='newColor'>
Test
</ion-item>
Here's the latest solution:
ion-item {
--ion-item-background: #ddd;
}
Ionic4 provides color property to give background-color
e.g.
<ion-item color="light">
</ion-item>
More theming property available here https://ionicframework.com/docs/theming/basics
Reference doc : https://ionicframework.com/docs/api/item
Actually got it working in a different way:
.item-complex .item-content { background-color: #262B32 !important; }
as suggested by #gylippus here in post #5
I created a color scheme in variable.scss
.ion-color-newcolor {
--ion-color-base: #224068;
--ion-color-contrast: #56b4d3;
}
Using:
<ion-item color="newcolor">
<ion-label position="stacked">Name: </ion-label>
<ion-input required type="text"></ion-input>
</ion-item>
A workaround is using <a> tag instead of <ion-item> tag, for example: change <ion-item> to <a class="item"> and then style it with whatever you want.
Source: http://ionicframework.com/docs/components/#item-icons
There is a newer solution.
<ion-item
[style.--background]="yourColor"
>
//dummy
</ion-item>
In Ionic3, below css will do the trick.
.item-ios {
background-color: transparent !important;
}
<ion-item>
<div class="item-content">
</div>
</ion-item>
The Ionic CSS contains a CSS property:
.item .item-content {
background-color: transparent !important;
}
its apply on child dom of <ion-item>. We can use can use div class='item-content', but if we won't all the css(.item-content) property would apply to the <ion-item> child elements like if we use
<ion-item>
Something //all css will apply into it
</ion-item>
.item .item-content {
background-color: transparent !important;
}
I'm not able to comment that's why I am writing over here.
Now you can use the appStyleProperty property of ion-item this way:
<ion-item
[appStyleProperty]="{ background: someColor }"
>
</ion-item>
You shall use this method. It worked for me.(ion-item needs a inner element to hold the value)
<ion-item class="inv_adj_menu"><div>View Details</div></ion-item>
<ion-item class="inv_adj_menu"><div>View Lines</div></ion-item>
<ion-item class="inv_adj_menu"><div>Validate Inventory</div></ion-item>