I'm trying to change the ion-icon title that appears on mouse-hover. Example:
I've tried for at least a couple of hours to find a solution for this. I just don't know how i can access the title element of ion-icon via css to be able to change the content of it to 'Edit' instead of 'Create'. Any help would be appreciated.
You may try disabling ion-icon popup using CSS event blocking and set "title" property on to a parent element.
CSS
ion-icon {
pointer-events: none;
}
Or you can create Icon element using the below code as a workaround and set it on a button.
const icon = <Icon icon='arrow-right' title={false} />;
return <Button minimal icon={icon} title='Next' />;
Details here - https://github.com/palantir/blueprint/issues/2321
disable events:
ion-icon {
pointer-events: none;
}
and wrap icon with span tag using title attribute:
<span title="Edit" style="font-size: x-large;">
<ion-icon name="create"></ion-icon>
</span>
Ionic 5 - Just wrap it in a div like below:
<div (click)="presentActionsPopover($event, obj)" slot="end" title="Actions" size="small">
<ion-icon name="ellipsis-vertical-outline" slot="icon-only"></ion-icon>
</div>
Try the below:
<ion-button title="Create Project">
<ion-icon name="create"></ion-icon>
</ion-button>
Related
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/
It may be silly question but I am not much familiar with ionic and css, so Can any one tell me how to change text color of the ionic button?
<div class="bottom-button" margin text-center>
<button ion-button color="energized">
Register
</button>
</div>
Here, Button color is yellow and text color is black. I want to change text color to white.
fix your code with style
<div class="bottom-button" margin text-center>
<button ion-button style="color:red">
Register
</button>
</div>
OR use css:
button{
color:red
}
<div class="bottom-button" margin text-center>
<button ion-button>
Register
</button>
</div>
In ionic-4 button text color will be color-contrast which in defined variables.scss file.
you can simple change your button color as well as button text color by creating your own color.
in your .html file
<ion-button class="loginButton" color="bgColor" shape="round" id="loginButton (click)="loginAction()">
and in your src -> theme -> variables.scss
--ion-color-bgColor: #1c1c1c;
--ion-color-bgColor-rgb: 28, 28, 28;
--ion-color-bgColor-contrast: #ffffff;
--ion-color-bgColor-contrast-rgb: 255, 255, 255;
--ion-color-bgColor-shade: #414040;
--ion-color-bgColor-tint: #050404;
.ion-color-bgColor {
--ion-color-base: var(--ion-color-bgColor) !important;
--ion-color-base-rgb: var(--ion-color-bgColor-rgb) !important;
--ion-color-contrast: var(--ion-color-bgColor-contrast) !important;
--ion-color-contrast-rgb: var(--ion-color-bgColor-contrast-rgb) !important;
--ion-color-shade: var(--ion-color-bgColor-shade) !important;
--ion-color-tint: var(--ion-color-bgColor-tint) !important;
}
Using ion-button with color set as primary :
<ion-button color="primary">Save</ion-button>
change the following in theme/variables.scss :
--ion-color-primary-contrast: #edce12;
--ion-color-primary-contrast-rgb: 237 ,206 ,18;
You can also set as secondary, tertiary...
If you want to change color through whole application, then I would suggest you to override text-color variable to your src/theme/variables.scss
$button-md-text-color: #ColorCode
$button-ios-text-color: #ColorCode
When creating a button on the ionic creator(v3) I can create a button like this
But when I export the template it renders like so:
Here is my HTML:
<button ion-button icon-end block color="energized">
<span>Edit</span>
<ion-icon name="create"></ion-icon>
</button>
How do I correctly align the button and icon so that the icon is positioned at the end and the button text is centered. Is there a built in way I can do this using ionic directives? Or do I have to create custom CSS to achieve this?
From css, you can add
button ion-icon {
position: absolute;
right: 20px;
}
Selector can be button[icon-end][block] ion-icon{...}
I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...
This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.
<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</button>
Clicking in the green or orange area works fine.
The image on the right, clicking on the element in blue, doesn't trigger the click.
I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)
try with this:
<a href="javascript:void(0)" ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
<i class="icon icon-awesome"></i>
<span>Awesome</span>
</a>
I've managed to get it working using z-index.
The icon and the span needed to have the position set for the z-index to have any effect.
I added the following to my .scss file.
.awesome {
.icon {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}
I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.
For me the solution was to move the ng-click inside the <button> tag. I had it previously in <span> and it was working in Chrome, but not in Firefox and IE.
After the ng-click resides in <button> instead of <span> tags, it works in all three browsers with no errors.
Here is my resulting code:
<button class="btn btn-default btn-xs" ng-click="myFunction()">
<span class="glyphicon glyphicon-th-list">
</span></button>
Hope this helps.
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>