I have a question for the ionic framework, i hope someone can help me...
I have an ion-list with "ion-item-right". This is all ok, the button is on the right. Now i need to have three other icons, which are centered, so that i have:
text - 3 icons centered - 1 icon right
this is my code:
<ion-item
class="item-stable accordion item-icon-right"
ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<i class="icon ion-star"></i>
<a class="button marginrighticon button-icon icon ion-close energized" ng-click="deleteSkill(skill)"></a>
</ion-item>
Of course, this isn´t working. The three "ion-stars" should be centered, but i haven´t found a tag by which i can do this... I hope someone can help me ;)
I think you have to do some CSS styling... like this:
<ion-item class="item-stable accordion item-icon-right item-button-right" ng-show="!skillHasSubskill(skill)">
{{skill.skillName}}
<div class="icon" style="margin-right: 80px">
<i class="ion-star"></i>
<i class="ion-star"></i>
<i class="ion-star"></i>
</div>
<a class="button button-icon" ng-click="deleteSkill(skill)">
<i class="icon ion-close energized"></i>
</a>
</ion-item>
for everyone with the same problem...
the solution above is in many ways correct, but i had to adopt it a little bit...
here´s my code:
<ion-item
class="item-stable accordion nopadding"
ng-show="!skillHasSubskill(skill)">
<div class="row">
<div class="col">{{skill.skillName}}</div>
<div class="col">
<i class="padding-right icon ion-star"></i> <i
class="padding-left padding-right icon ion-star"></i> <i
class="padding-left icon ion-star"></i>
</div>
<a
class="button button-icon button-right icon ion-close energized"
ng-click="deleteSkill(skill)"></a>
</div>
</ion-item>
i had to do it, because in the other way posted above the height of the ion-item was too big because the icons were interpreted in an own line, not in the same one as the normal text ;)
but thank you very much!
edit: i have another silly problem: the text isn´t aligned vertically... vertical-align:middle isn´t a solution (aligned to col & row)... has anyone an idea??
Related
if I put my mouse pointer on one of the info buttons, it will show both tooltips. How can I prevent this? I just want to show the one tooltip, on which the mouse pointer points to. Does anyone have an idea?
Here is the code:
<div class="col-12 col-lg-6">
<div class="dx-fieldset-header">Dateianhänge<span class="dx-fieldset-header-subtext"> Download / Löschen</span></div>
<div class="dx-field">
<div class="anhang-liste">
<mat-chip-list *ngIf="data?.anhanglist.length" aria-label="Anhänge löschen">
<mat-chip *ngFor="let anhang of data?.anhanglist" class="anhang-chip">
<span class="anhang-filename" (click)="downloadAnhang(anhang)">
{{ anhang.dateiname }}
</span>
<mat-icon *ngIf="!IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)" class="anhang-delete" (click)="deleteAnhang(anhang)">cancel</mat-icon>
<i
*ngIf="IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)"
style="margin-left: 0.2em;"
class="fa fa-info-circle"
id="infoKontoauszugzeilenAnhang{{anhang.id}}"
(mouseenter)="toggleDefault()"
(mouseleave)="toggleDefault()"
>
<dx-tooltip
*ngIf="IstAnhangBereitsInKontoauszugszeileVerwendet(anhang.id)"
target="#infoKontoauszugzeilenAnhang{{anhang.id}}"
[(visible)]="defaultVisible"
[closeOnOutsideClick]="false"
>Verwendet in folgenden Kontoauszugzeilen:
{{zeilenNummernMitAnhang[anhang.id]}}
</dx-tooltip>
</i>
</mat-chip>
</mat-chip-list>
</div>
</div>
</div>
In the this codepen I have a row with 3 div tags and each div tag has 1 icon tag. However, I am getting 2 extra icon tags showing below the ID column. Where are theses extra icons coming from? When I inspect element it appears to be under my container class but it is not what is in my html. Thank you.
This is what I have in the html:
<div class="row">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="id-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="bird-name-caret" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="bird-type-caret" class="fa fa-caret-down"</i></span></div>
</div>
It occurs because of there is unclosed <i> tag:
<div class="col-4">
<span ng-click="sortBy('Type')">Type of Bird
<i id="bird-type-caret" class="fa fa-caret-down"></i>
</span>
</div>
I have the current situation:
Relevant code:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="space-between">
<span class="page-headline">
<img class="logo" src="./logo.png"/>club
</span>
<button md-icon-button class="main_menu_button1" (click)="dinnerClicked()">
<md-icon>local_pizza</md-icon>
</button>
<button md-icon-button class="main_menu_button2" (click)="notificationsClicked()">
<md-icon>notifications</md-icon>
</button>
<button md-icon-button class="main_menu_button3" (click)="eventsClicked()">
<md-icon>event_note</md-icon>
</button>
</div>
</md-toolbar>
I just want the 3 icons to be adjacent closely to each other and align to the right. If I change fx-layout-align to fx-layout-align-xs, I get almost what I want:
But to the left instead of to the right...
I have tried many CSS configurations but none worked for me, is there any easy way to acheive this? Many thanks.
If you are using this plugin: https://github.com/angular/flex-layout#api-overview
i suggest:
<md-toolbar color="primary" class="main-toolbar">
<div fx-layout="row" fx-flex fx-layout-align="end" >
...
</div>
</md-toolbar>
Just add below code in your css:
<style>
.main_menu_button1,.main_menu_button2,.main_menu_button3
{
float:right;
}
</style>
In My ionic I have bottom tabs as well as top tabs after the header bar. However I see the output differently in Google Chrome and the Ionic Iphone App.
Attaching screenshots of how it looks on Google Chrome (as intended) and on the Inoic Phone app
On Google Chrome
On Ionic Iphone App
Here is the 1st Tab's HTML Code:
<ion-view view-title="TAB 1">
<ion-content >
<ion-tabs class="tabs-top tabs-icon-top has-header">
<ion-tab title="Tab1" icon-on="ion-heart" icon-off="ion-heart">
<!-- Tab 1 content -->
<div class="padding" >
<h2 class="title ">Lorem ipsum dolor sit ametr adipiscing elit</h2>
<p></p>
<ion-scroll direction="x" class="item " style="padding:5px">
<button data-ng-repeat="item in recent|filter:{tag:'!!'}" class="horizontaList button" ng-click="addFromRecent(item.id, 'tag');">
{{item.tag}}
</button>
</ion-scroll>
Here is index.html code:
<body data-ng-app="starter">
<ion-side-menus>
<ion-pane ion-side-menu-content="">
<ion-nav-bar class="bar">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon ion-navicon" ng-click="openMenu()"></button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-header-bar class="bar bar-header "></ion-header-bar>
<ion-content has-header="true">
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-ios-home-outline"></i>
Home
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-log-out"></i>
Log out
</a>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
Thanks in advance for your help!
I think your has-header class is wrong on <ion-tabs>. Quote from the ionic blog:
The beta has also removed the requirement for the developer to
manually tell the content to reposition itself if there is a header,
footer, or tabbar present. Resultantly, the has-header, has-footer,
and has-tabs attributes have been removed. Ionic now will
automatically reposition and resize the content depending on what
surrounding widgets are present. If any old alpha code references
these attributes or classnames they can be safely removed since
they’re no longer being used by the framework.
Here is my page screenshot http://s30.postimg.org/44jynnz35/Untitled_2.png
html:
<div id="social-bar">
<a href="https://www.facebook.com/pages/Open-Source-Hacker/181710458567630">
<i class="icon icon-facebook"></i>
<span>Facebook</span>
</a>
<a href="https://twitter.com/moo9000">
<i class="icon icon-twitter"></i>
<span>Twitter</span>
</a>
<a href="https://plus.google.com/103323677227728078543/">
<i class="icon icon-google-plus"></i>
<span>Google Plus</span>
</a>
<a href="http://opensourcehacker.com/">
<i class="icon icon-rss"></i>
<span>Blog</span>
</a>
</div>
I have been created social links with social icons, I took source code from this link https://github.com/miohtama/FontAwesome-and-Bootstrap-social-icons-example/
I need one more link and icon, that is mailbox.
So i added code like this,
<a href="http://opensourcehacker.com/">
<i class="icon icon-gmail"></i>
<span>Email</span>
</a>
But i m not sure for mail box icon code,
I have 3 files,
1. <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet" />
2. <link href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet" />
3. <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
So may i know, exact code for mailbox icon or where can i take?
Any help would be highly appreciated.
Thanks in advance.
It's icon-envelope
<i class="icon icon-envelope"></i><span>Email</span>
Since you are using older version of fontawesome, some icons may be missing from the file. Try using this updated library : http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css instead of older one.