<div class="list card">
<div class="item item avatar item-icon-right">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Simran Kaur</h2>
<p>November 06, 1992</p>
</div>
I have this piece of code in ionic and whatsoever image I add here takes up most of the space. Why is that and how do I fix this?
It looks like this:
Here is my complete code:
<div class="list card">
<div class="item item avatar item-icon-right">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Simran Kaur</h2>
<p>November 06, 1992</p>
</div>
<div class="item item-body">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
1 Like
5 Comments
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
There is an example of how card should be coded. Avatar is renderd small on the left side, cover is rendered big, and occupy whole space.
Here is codepen with your image rendered both small and big: http://codepen.io/anon/pen/RPvYpp
<div class="list card">
<div class="item item-avatar">
<img src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body">
<img class="full-image" src="https://pbs.twimg.com/profile_images/598205061232103424/3j5HUXMY.png">
<p>
This is a "Facebook" styled Card. The header is created from a Thumbnail List item,
the content is from a card-body consisting of an image and paragraph text. The footer
consists of tabs, icons aligned left, within the card-footer.
</p>
<p>
1 Like
5 Comments
</p>
</div>
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon ion-share"></i>
Share
</a>
</div>
</div>
Related
I want to optimize my working carousel and I want to use for:each.
Does anyone maybe see my error?
Working Quote Code
New not working Quote Code
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<li data-target="#quote-carousel" data-slide-to="{iterator.index}" {'class="active"'->f:if(condition:iterator.isFirst)}></li>
</f:for>
</ol>
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner" role="listbox">
<f:for each="{field.person}" as="person" iteration=“iterator“>
<!-- Quote {iterator.index -->
<div class="item {'active'->f:if(condition:iterator.isFirst)}">
<blockquote>
<f:format.html>{person.expert}</f:format.html>
<small>{person.expertName}</small>
</blockquote>
</div>
</f:for>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control">
<span style="top: 25%;" class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
I'm creating a project using Ionic 1.3.2 and building to Android 5.1.1. The problem is after buiding the classes has-header and has-tabs-top are added into <ion-content> automatically and because this a space is beeing showing. I don't know why this happens and I don't know how to remove these classes or if there's another solution.
How could I solve this ?
View
<ion-view>
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="O que procura ?">
</label>
</div>
<ion-content>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="empresa in empresas | filter:pesquisar"
ng-click="getEmpresa({{empresa.id}})" >
<img ng-src='{{empresa.imagem}}'>
<h2 class="customTitle">{{empresa.razaoSocial}}</h2>
<div style="margin-bottom:20px">
<ul>
<li ng-repeat="ce in empresa.categorias | filter:pesquisar"
class="customListInline customCategoriaEmpresa">{{ce.descricao}}</li>
</ul>
</div>
<div class="row row-bottom">
<div class="col col-25"><i class="icon ion-thumbsup icon-24px"></i></div>
<div class="col col-25"><i class="icon ion-chatbox icon-24px"></i></div>
<div class="col col-25">
<i class="icon ion-ios-telephone icon-24px"></i>
</div>
</div>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
As per #MikeT's comment, but i think you want:
<ion-content style="top:0px">
Add this attribute to your ion-content
hide-nav-bar="true"
I am trying to create a popup in my ionic view.
<div class="item tabs tabs-secondary tabs-icon-left">
<a class="tab-item" href="#">
<i class="icon ion-thumbsup"></i> Like
</a>
<a class="tab-item" href="#">
<i class="icon ion-chatbox"></i> Comment
</a>
<a class="tab-item">
<i class="icon ion-share"></i> Share
</a>
</div>
When i click on Share button , I should get the below template as popup.. not as separate view.
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
How to do it?
Thanks,
Sabarisri
create a share button:
<div class="buttons">
<button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
</div>
put your popover template like this:
<script id="templates/popover.html" type="text/ng-template">
<ion-popover-view>
<ion-content>
<div class="popover-mask"></div>
<div class="popover popover--down" style="top: 20px; left: 165px;">
<div class="popover__top-arrow"></div>
<div class="popover__content">
<ul class="list">
<li class="item">Facebook
</li>
<li class="item">Twitter
</li>
</ul>
</div>
</div>
</ion-content>
</ion-popover-view>
</script>
in your controller call the popover like this:
$ionicPopover.fromTemplateUrl('templates/popover.html', {
scope: $scope,
}).then(function(popover) {
$scope.popover = popover;
});
I used the following code inside my side menu:
<ion-side-menu side="left">
<ion-content>
<div class="list">
<a class="item" menu-close href="#/app/products">
<img src="img/home.png" width="30px" />
<!-- <i class="icon ion-home"></i> -->
<h2>YourPhoto24</h2>
</a>
<a class="item" menu-close href="#/app/account">
<img src="img/profile.png" width="30px" />
<h2>mein Konto</h2>
</a>
<a class="item" menu-close href="#/app/orders">
<img src="img/orders.png" width="30px" />
<h2>meine Bestellungen</h2>
</a>
<a class="item" menu-close href="#/app/receivers">
<img src="img/receivers.png" width="30px" />
<h2>meine Empfänger</h2>
</a>
<a class="item" menu-close href="#/app/email">
<img src="img/email.png" width="30px" />
<h2>Email an uns</h2>
</a>
<a class="item" menu-close href="#/app/recommend">
<img src="img/recommend.png" width="30px" />
<h2>Empfehlen Sie uns weiter
<p>mein Guthaben beträgt zur Zeit: </p>
</h2>
</a>
<a class="item" menu-close href="#/app/siteNotice">
<img src="img/laws.png" width="30px" />
<h2>AGB & Impressung</h2>
</a>
</div>
</ion-content>
</ion-side-menu>
So i wanted an icon at the left and the text to the right centered vertically. Unfortunately i did not get the result i expected:
1: How can i manage to get more space between the image and the text and how can i vertically center the text?
2: How can i hide the dividers?
3: How can i increase the top and bottom padding of the list items? I want them to be 40px.
I added the following to my css file:
.menu.menu-left, .list a {
border-color: transparent;
padding-top: 30px;
padding-bottom: 30px;
}
.menu.menu-left, .list img {
float: left;
vertical-align: middle;
}
.menu.menu-left, .list h2 {
display: inline-block;
}
The padding and the hiding of the divider works with that code. but i cant manage to pretty align the text next to the image centered vertically (both should be centered vertically, the image and the text!)
So whats left is: How can i manage to get more space between the image and the text and how can i vertically center the text?
Ionic already provides a lot to do something like this with stylings they already made. Take a look at this example in their docs.:
<div class="list">
<a class="item item-icon-left" href="#">
<i class="icon ion-person"></i>
mein Konto
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-navicon-round"></i>
meine Bestellungen
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-heart"></i>
meine Empfänger
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-email"></i>
Email an uns
</a>
<a class="item item-icon-left" href="#">
<i class="icon ion-android-share-alt"></i>
Empfehlen Sie uns weiter
</a>
</div>
Here is a little codepen to demonstrate what you want:
http://codepen.io/anon/pen/ZGBegG
I am using angular-strap to create a navbar. It collapses down to the hamburger icon just like it should, but when it is collapsed (hamburger icon) it will not expand to click on a link. Here is my code:
<nav class="navbar navbar-default" role="navigation" bs-navbar>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav>
The navbar is responsive like expected. Also, the directive is being instantiated, because the breakpoint in the link function gets hit. As explained above when the navbar is in it's hamburger state, it won't expand to make it able to click on any of the links. What else do I need to look at to make this work with angular-strap? How do I make the hamburger icon expand?
You can make use of the collapse directive in ng-strap 2.1.3.
This was added very recently.
An example:
<nav class="navbar navbar-default" bs-collapse>
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" bs-collapse-toggle>
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ng-bind="config.options.page.pageName" ui-sref="root">Doks</a>
</div>
<div bs-collapse-target>
<ul class="nav navbar-nav">
<li ng-repeat="category in categories" class="item" ng-class="{active: urlParams.category === category}">
<a ui-sref="hasCategory({category: category})">{{category}}</a>
</li>
</ul>
</div>
</div>
</nav>