i'm trying to stack those two icon in a ionic icon. I know how to make the custom ionic icon, no problem. I also know about the :before and :after trick to stack icon from this question
For now, i got this css.
.ion-md-notice:before, .ion-ios-notice:before {
font-family: "FontAwesome" !important;
content: '\f133' !important;
bottom: -0.25em;
position: relative;
color: #d81717;
}
.ion-md-notice:after, .ion-ios-notice:after {
font-family: "FontAwesome" !important;
content: '\f05e' !important;
font-size: 12px;
position: relative;
top: -0.8em;
color: #d81717;
}
Here is the HTML,
<ion-item *ngFor="let eventItem of dayEvents" text-wrap>
<ion-icon [name]="eventItem.icon" item-left></ion-icon>
<ion-icon name="create" item-right color="secondary" (click)="addEvent(eventItem)"></ion-icon>
<ion-icon name="trash" item-right color="danger" (click)="removeEvent(eventItem)"></ion-icon>
<p class="title">{{eventItem.title | slice: 0: 30}}</p>
<p class="subtitle" *ngIf="eventItem.description">{{eventItem.description | slice: 0: 40}}...</p>
<p class="times">{{eventItem.start | date: 'shortTime'}} - {{eventItem.end | date: 'shortTime'}}</p>
</ion-item>
final result :
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
I manage to make it fit for one size of icon, no problem,
But when I try to use the icon elsewhere, the icon does not fit anymore.
Please note that in the second images, the font are bigger.
Any help would be appreciated. Thanks.
Please look at the snippet below. The CSS part. Probably you'll have to adjust classes and set the desired font-size to .item-icon.
.item-icon {
font-family: 'FontAwesome';
position: relative;
font-size: 60px
}
.item-icon:before {
content: '\f133';
color: #d81717;
}
.item-icon:after {
content: '\f05e';
font-size: .5em;
position: absolute;
top: .8em;
left: .5em;
color: #d81717;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ion-icon item-left="" role="img" class="icon icon-md ion-ios-notice item-icon" aria-label="notice" ng-reflect-name="notice"></ion-icon>
Related
I have a fab list with fab buttons that shall have labels.
I found Fabs With Labels In Ionic 3 & whats the correct way of inserting label in an Ionic FAB list.
My HTML code is:
<ion-fab left top>
<button ion-fab color="light">
<ion-icon name="menu"></ion-icon>
</button>
<ion-fab-list side="bottom">
<button ion-fab>
<ion-icon name="person"></ion-icon>
<ion-label>Test Test Test</ion-label>
</button>
<button ion-fab>
<ion-icon name="alarm"></ion-icon>
<ion-label>Bla Bla</ion-label>
</button>
</ion-fab-list>
</ion-fab>
CSS
button[ion-fab] {
overflow: visible;
position: relative;
ion-label {
display: inline-block;
position: absolute;
top: -8px;
left: 60px;
color: white;
background-color: rgba(0,0,0,0.7);
line-height: 24px;
padding: 4px 8px;
border-radius: 4px;
pointer-events: auto;
}
contain: layout;
}
But the labels break the text to a newline if i don't specify a width.
If i do the labels don't adjust their width to the label's content.
How do i make the label content not wrap to a new line?
Issue originated from
ion-label {
white-space: normal !important;
}
from my app.scss
I have create a demo in ionic 3. You can check it:
Try this:
Stackblitz - Ionic 3 Fab button Demo Link
So I am building a PWA using the Ionic PWA ToolKit. Now it displays as it should on my mac but I recently tried it on 3 different laptops running windows and everything just seemed zoomed in.
This is how it appears on my mac and should appear:
And this is how it displays on windows (other laptops):
This is my CSS:
/*
* =============================================================================================
* Content Section
* =============================================================================================
*/
app-bus-home {
background: url(../assets/img/banners/bus.jpg) no-repeat bottom/cover;
min-height: 730px;
text-align: left;
color: #ffffff;
}
app-bus-home ion-grid {
max-width: 1200px;
}
app-bus-home ion-text h1 {
margin-top: 90px;
}
app-bus-home h1 {
font-size: 60px;
}
app-bus-home ion-img.bus {
width: 500px;
margin-top: 65px;
}
date-picker {
width: 500px;
margin-top: 25px;
display: none;
position: absolute;
z-index: 2000;
top: 25px;
overflow: hidden;
}
And this is the JSX layout:
render() {
return [
<ion-grid align-items-start>
<ion-row>
<ion-col>
<ion-text color="light">
<h1 class="font-light animated slideInLeft">BUS <strong class="font-black">TICKETS</strong></h1>
<p class="font-light animated slideInLeft">xxxxxx</p>
<p class="font-light animated slideInLeft">xxxxxx</p>
</ion-text>
<ion-img class="bus animated zoomIn" src="../assets/img/bus.png" />
</ion-col>
<ion-col size="4" padding>
<bus-search class="animated slideInRight"></bus-search>
<date-picker availableDates={this.availableDates} actionUrl={this.actionUrl} showHeader={true} showButtons={true} class="animated"></date-picker>
</ion-col>
</ion-row>
</ion-grid>
];
}
Your page isn't responsive, so it means that you can't see it in the same way on different devices. To optimize the visualization on several devices, i suggest you to use '%' instead of 'px' in your css.
In alternative you can use libraries like Bootsrap to do it. Bootstrap offers lot of classes to make your page responsive. Usually I use the following documentation: https://www.w3schools.com/bootstrap4/default.asp .
I have a requirement to create an icon as shown below.
I have tried as shown below.
.html
<ion-content padding>
<div style="background:lightblue;width: 50px;height: 50px;border-radius: 50%;">
<ion-icon name="heart"></ion-icon>
</div>
</ion-content>
Plunker is here
Q1: Is this the correct approach to create this kind of icon appearance?
Q2: How can I make it same as above image?
Q3: After that, I need to use that icon any place on any component.If I use margins to center the heart icon, hope it'll not work on any place no? In other words, I need to use it as a single unit.
Hope you'll give a feedback for this.
.heart-icon {
background: lightblue;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
color: #FFF;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="heart-icon">
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
Hope it is what you want to achieve. You can use ionic icon instead of font awesome.
scss
.heart-icon {
background: lightblue;
border-radius: 50%;
color: #FFF;
}
and for HTML
<ion-icon class="heart-icon" name="heart" item-start></ion-icon>
I am trying to show an edit icon on a cells hover state, using font awesome.
How can make the class name unique so I can target it with css for each row?
import {Icon} from 'react-fa'
if(this.props.day.achievements) {
listItems = this.props.day.achievements.map((achievement) => (
<div className="cell" key={achievement + "_achievements"}>
{achievement}
<div className="edit">
<a href="#">
<Icon name="pencil-square" className="edit" />
</a>
</div>
</div>
))
}
I am using the following css:
.cell:hover .edit {
display: block;
}
.edit {
padding-top: 7px;
padding-right: 7px;
position: absolute;
right: 0;
top: 0;
display: none;
}
.edit a {
color: #000;
}
How can I display the icon for each cell?
Since you're using position:absolute on the edit wrapper, try adding position:relative to the .cell. I suspect your icons ARE showing but they're all floating up to the top overlapping with each other.
Is there a way to make the background of an ionic 2 <ion-item> be transparent?
I have tried this CSS but it doesn't make the item transparent:
.list .item, .item-content .item-inner .item-block .item-ios
{
background: transparent !important;
}
ADDED CODE
My HTML looks like this:
<ion-content class="pu-my-plans-background">
<div *ngIf="hasPlans">
<ion-list no-lines class="pu-item-list">
<!--<ion-item-group reorder="true" (ionItemReorder)="reorderItems($event)">-->
<ion-item-sliding *ngFor="let plan of plans; let i = index" >
<ion-item class="pu-section-list-item pu-my-plans-item" (click)="editPlan(plan.id, plan.rev, plan.title, i)">
{{ plan.title }}
<br>
<span class="pu-my-plans-plan-date">{{ plan.updated}}</span>
<button *ngIf="plan.important" ion-button clear item-right>
<ion-icon name="ios-alert-outline"></ion-icon>
</button>
</ion-item>
<ion-item-options side="right">
<button ion-button color="danger" (click)="deletePlan(plan.id, plan.rev)">
<ion-icon name="delete"></ion-icon>
Delete
</button>
</ion-item-options>
</ion-item-sliding>
<!--</ion-item-group>-->
</ion-list>
</div>
</ion-content>
And my CSS like this:
page-my-plans {
}
.pu-my-plans-plus-circle {
display: block;
//border: 2px solid white;
background-color: $pu-orange;
border-radius: 50%;
height: 38px;
width: 38px;
}
.pu-my-plans-plus-circle span {
font-size: 38px;
font-weight: 100;
color: white;
position: absolute;
top: -7px;
left: 8.5px;
}
.pu-plan-addButton {
font-size: 30px;
margin-right: 14px;
margin-top:-2px;
}
.pu-section-list-item{
color: white;
background-color: black;
font-weight:$pu-item-font-weight;
font-size:$pu-item-font-size;
padding-left:20px;
padding-right:0px;
}
.item{
background: transparent !important
}
// THEMING CSS
// ===========
//
.pu-my-plans-background {
background-image: url("../assets/img/my_plan_bg#2x.png");
background-size: cover !important;
}
.pu-my-plans-item {
border-style:solid;
border-bottom-width: 2px;
border-bottom-color: $pu-orange;
}
.pu-my-plans-plan-date {
color: $pu-orange;
font-size: 11px;
font-weight: 200;
}
I have tried every combination of styling the ionic 2 items as I can think of but the best I can get with this is to get a white background behind the ion-item. The ion-content has an image background but I can't get to see this through the ion-item.
Here is a solution in Ionic 4:
HTML:
<ion-list class="bg-transparent">
<ion-item color="none" lines="none">
Some random text
</ion-item>
<ion-item color="none" lines="none">
Some random text
</ion-item>
</ion-list>
CSS:
.bg-transparent {
background: transparent;
}
Important things to note:
Set background color of the main list to transparent by applying the class and adding CSS as shown.
Add the color="none" attribute to each of the ion-item.
lines="none" remove the lines under each of the ion-item
That should do it!
For Android
.item-md {
background: transparent;
}
For iOS
.item-ios {
background: transparent;
}
Try this in Ionic 5 using CSS Custom Properties.
For ion-item
ion-item {
--ion-item-background: transparent;
}
For ion-list
ion-list {
--ion-item-background: transparent;
}
For the ionic 2 item sliding background color you can change the main sass variable
$item-ios-sliding-content-background(transprent);
$item-md-sliding-content-background(transprent);
In your src -> theme -> variables.scss file
you can find all the variables here
You are using sliding item. Try using the below code
.pu-item-list ion-item-sliding{
background: transparent !important;
}
Try this:
<ion-item color="transparent">
</ion-item>
This worked for me.
ion-item {
--ion-item-background: transparent;
box-shadow: none !important;
}
ion-list {
--ion-item-background: transparent;
box-shadow: none !important;
}
Create a new variable in variable.scss like this:
--ion-color-transparent: rgba(0, 0, 0, 0.0);
and use it like this:
<ion-item color="transparent" padding="0px"><ion-input type="email" placeholder="username"></ion-input></ion-item>.