I am a noice programmer and new to the Ionic Framework and Angular.js. I am developing a mobile app using Ionic primarily "out of the box". But, I'd like to display an Ionic list that combines a:
checkbox
item content (e.g. string of text)
avatar (i.e. an image associated with the item)
See mockup below...
A streamlined example of the HTML markup looks like this:
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Combine Checkbox & Avatar in List</h1>
</ion-header-bar>
<ion-content>
<ul class="list">
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #1
</li>
<li class="item item-checkbox item-avatar-right">
<label class="checkbox">
<input type="checkbox">
</label>
<img src="http://placehold.it/100x100">
Item #2
</li>
</ul>
</ion-content>
</ion-pane>
But the page is displayed like so:
My questions:
Does the Ionic Framework support this combination (combining a checkbox and an avatar image in a list item)?
If so, what markup or code (HTML, CSS, JS) can I use to render this type of display?
You can see code with a simple example here:
Plunker Example Code
Appreciate guidance and direction from the Stackoverflow community!
I think that you won't be able to achieve that with Ionic default CSS. Maybe you should work on some css to adjust some positions due to CSS incompatibilities between these elements. However, I could reach something very close to what you showed. Put the following item in your plunker code and give it a try:
<li class="item item-avatar-right item-checkbox">
<img src="http://placehold.it/100x100">
<label class="checkbox">
<input type="checkbox">
</label>
<h2>Headline</h2>
<p>Description</p>
</li>
I was able to combine the item-avatar class with a checkbox by placing the checkbox on the right (using the item-checkbox-right class) and by overriding the min-height with 0.
My HTML:
<ion-content class="list">
<ion-checkbox class="item-avatar item-checkbox-right" ng-repeat="user in connectedUsers">
<img ng-src="{{user.picture}}">
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</ion-checkbox>
</ion-content>
I also had to add the following CSS rule:
.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
min-height: 0;
}
I got a result like the following:
I was working on a solution for the same problem and i came up with this css class : item-checkbox-img
Just add it to the img tag in your ion-checkbox
You can see the result in this codepen, the image is resized and its absolute position places it to the right of the item
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope) {});
body {
cursor: url('http://ionicframework.com/img/finger.png'), auto;
}
.item-checkbox-img {
vertical-align: middle;
position: absolute;
top: 0px;
right: 15px;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<title>Toggles</title>
<link href="http://code.ionicframework.com/1.0.0-beta.14/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.14/js/ionic.bundle.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-list style="height: 2000px">
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/350x150">
</ion-checkbox>
<ion-checkbox>ion-checkbox
<img class="item-checkbox-img" src="http://placehold.it/100x100">
</ion-checkbox>
</ion-list>
</body>
</html>
Related
I am building an application using Ionic (version 1) and would like to hide a div from the controller when the user is scrolling. I am stuck and don't know where to start.
This is my code:
<body ng-app="starter" style="padding-top:150px;">
<div ng-controller="AppCtrl" id="header" >
<div class="bar-aaa">
<div class="myLogo">
<img src="img/images/logo.png" style="display: block;margin-left:auto;margin-right:auto;height:50px;margin-top:10px;margin-bottom:30px;" alt=""/>
</div>
<div class="row" style="padding-bottom: 0px;">
<div class="col col-33" style="border-bottom: 2px solid {{oneLine}};margin-bottom: 0;height: 59px;"><img src="{{one}}" style="display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{twoLine}};margin-bottom: 0;height: 59px;"><img src="{{two}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
<div class="col col-33" style="border-bottom: 2px solid {{threeLine}};margin-bottom: 0;height: 59px;"><img src="{{three}}" style="height:17px;display: block;margin-left:auto;margin-right:auto;" alt=""/></div>
</div>
</div>
</div>
<span ng-show="loading" style="position: absolute;z-index: 99999;margin-left:-75px;top:150px;left:50%;right:50%;background:rgba(0,0,0,0.5);text-align:center;padding:15px;width:150px;" >
<div>
<ion-spinner icon="spiral"></ion-spinner>
<h5 style="color:#fff;">Processing...</h5>
</div>
</span>
<ion-nav-view></ion-nav-view>
</body>
Your question does not explain which <div> you are trying to hide and what code you have tried to use already, but can you assign a function to the on-scroll directive of the ion-content and do whatever you want to do in that function. So like this:
<ion-content on-scroll="scrollFunction()">
And then in your controller add a function called scrollFunction or preferably something more descriptive.
$scope.getScrollPosition = function() {
// Here you can do whatever you want when someone is scrolling.
}
You could for example update a variable in this function and assigned that variable to the ng-show of the <div> you want to show or hide.
To answer your other question regarding why the getScrollPosition() function keeps returning 0. It is a known issue, you can find similar reports here. I am not entirely sure why this happens, but it seems like Ionic is grabbing the scroll position of a different view causing it to stay 0. You can solve this by assigning a delegate-handler to your <ion-content>, which basically gives you an unique identifier to work with. It would look something like this:
<ion-content delegate-handle="scrollHandler" on-scroll="getScrollPosition()">
And then in your controller, instead of doing the following:
$ionicScrollDelegate.getScrollPosition().top;
You need to do this:
$ionicScrollDelegate.$getByHandle("scrollHandler").getScrollPosition().top;
That should solve the issues you are experiencing.
In ionic i want to show multiple images in a single row. right now it shows only one image that took the entire width.My requirement is showing below as an image
ion-slidebox is deprecated. Use ion-slides that uses Swiper. The minimum IONIC version required would be 1.2.
Here's a post I wrote that you could use to implement it
Btw, ion-slides uses the awesome SwiperJs, so for your requirement, in your controller when you define the swiper, you could just use their slidesPerView and set it to a number of slides that you want to show like below!
$scope.swiperOptions = {
/* Whatever options */
effect: 'slide',
initialSlide: 0,
slidesPerView: 3,
/* Initialize a scope variable with the swiper */
onInit: function(swiper){
$scope.swiper = swiper;
// Now you can do whatever you want with the swiper
},
onSlideChangeEnd: function(swiper){
console.log('The active index is ' + swiper.activeIndex);
}
};
</div>
<ion-slide ng-controller="HomeCtrl" ng-init="';ary1=[0,1,2];ary2=[3,4,5];ary3=[6,7,8]">
<ion-slide-box show-pager="false" auto-play="false" style="width:100%" does-continue="false">
<ion-slide ng-repeat="i in [1,2,3]" style="height:180px;">
<div ng-if="i==1" ng-repeat="n in ary1" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==2" ng-repeat="n in ary2" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
<div ng-if="i==3" ng-repeat="n in ary3" style="width:100%;">
<div class="image" ng-style="{'background':'url('+homelist.NewRelease[n].Mvalue+')white no-repeat center','background-size':'cover'}" style="height:180px;width:30%; float:left; margin-right:3%;padding:9%">
</div>
</div>
</ion-slide>
</ion-slide-box>
</ion-slide>
I have a simple slick carousel in an Angular App, using angular-slick. Whenever I load the App for the first time (with the view that contains the slick carousel), the carousel displays correctly. However after switching to another view and returning to the carousel slick view, I get the following error:
TypeError: u.slick is not a function
the Carousel looks like this:
<div class="col-sm-6 col-sm-offset-3 mainContent">
<div style="height: 50px; margin-bottom:70px;">
<slick class="slider multiple-items slick-slider" slides-to-scroll="1" slides-to-show="3" infinite="true" speed="3000" autoplay="true" init-onload="true">
<div ng-class="slick-slide" style="width: 187px;"><h3 class="text-center">1</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">2</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">3</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">4</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">5</h3></div>
<div ng-cclass="slick-slide" style="width: 187px;"><h3 class="text-center">6</h3></div>
</slick>
</div>
</div>
Is there a reason why the (I guess) jQuery plugin gets "lost" after changing views?
Thanks
For anyone facing the same problem, I ended up using a different angular-slick directive, the one created by DevMarc (https://github.com/devmark/angular-slick-carousel), which solved the problem "auto-magically".
I want to build a menu something like as below but I am not finding an appropriate sample utilising AngularJS 1.4, bootstrap & accordion.
Accordion is a must. Please advise.
menu1
menu2
submenu2.1
submenu2.2
sub-submenu2.2.1
sub-submenu2.2.2
menu3
I have added the code below. Style sheet is Bootstrap.css. Also some custom stylesheet used in project. Accordion menu elements should have different colours at each level of menu. Also the one selected should be displayed in different color. When we hover over elements it should display different color.
As per the below implementation I have 2 main level elements in menu. The first element is displaying proper accordion behaviour. Second element is always open.
No stylesheet is getting applied to either of the menu elements. Please advise.
HTML:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group is-open="firstMenuItemStatus.isFirstOpen" is-disabled="firstMenuItemStatus.isFirstDisabled">
<uib-accordion-heading ng-if="c.pDtos">
{{c.name}}
</uib-accordion-heading>
<div ng-repeat="p in c.pDtos" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading>
{{p.name}}
</uib-accordion-heading>
<div ng-show="p.aDtos" ng-repeat="a in p.aDtos">
<a ui-sref="crhDetail({ crhId : a.crhId})">{{a.name}}</a>
</div>
</uib-accordion-group>
</script>
<div class="menuSec" ng-controller="menuCtrl">
<uib-accordion close-others="true">
<div ng-repeat="c in menuTreeSet" ng-include="'menuTree'" >
</div>
</uib-accordion>
</div>
Custom CSS:
.menuSec {top: 80px;left: 0;right: 0;bottom: 0;}
.menuSec>ul {position: absolute;background:#2166b3;width:100%;}
.menuSec>ul>li, .secondLevelList>li, .thirdLevelList>li{position: relative;float: right;display:block;list-style: none;width: 100%;height: 40px;line-height: 44px;text-align: right;font-size: 12px;padding-right: 14px;box-shadow: 0 1px 0 #3A76C4;cursor: pointer;}
.secondLevelList, .thirdLevelList{width:220px;}
.secondLevelList>li, .thirdLevelList>li{width:220px;height:30px;line-height: 32px;float: right;list-style: none;}
.selected{height:auto !important;background:#135aa9;border-left: 3px solid #000033;border-bottom:none;box-shadow:none !important;}
.secondLevelList>.selected{background:#004388;}
.menuText{position:absolute;text-align:right;right:47px;}
.menuSec ul li:hover {background: #135aa9;border-left: 3px solid #000033;}
.menuSec ul li .fa {margin-left: 14px;line-height: 40px;}
.secondLevelList, .thirdLevelList{position:relative !important;float:right;display:block;border-top:1px solid #000033;}
.secondLevelList{margin-right:-14px;}
.thirdLevelList{margin-right:-24px;}
.secondLevelList>li{background:#0a4d99;border-bottom:1px solid #2a66a9;padding-right:24px;}
.selected>.secondLevelList>li:hover{background:#004388 !important;}
.secondLevelList>li:hover{background:#003b78;}
.thirdLevelList>li{background:#004388;border-bottom:1px solid #18589f;padding-right:34px;}
.thirdLevelList>li:hover{background:#003871 !important;}
.thirdLevelList>.selected, .thirdLevelList>.selected:hover{padding-right:10px;background-image:url(../images/NowWeAt.png) !important;background-position:right !important;background-repeat:no-repeat !important;}
.menuSecCT{width:80px;overflow:hidden;}
.menuSecCT .menuText{display:none;}
.menuSec ul li{padding-right:34px;}
.secondLevelList, .thirdLevelList{display:none;}}
Here is an example of multi-level (3 levels) UI Bootstrap accordion. You have to adapt to your needs.
This example is based on ng-include:
<script type="text/ng-template" id="menuTree">
<uib-accordion-group>
<uib-accordion-heading ng-if="menu.listChilds">
{{menu.label}}
</uib-accordion-heading>
<div ng-repeat="submenu in menu.listChilds" ng-include="'smenuTree'"></div>
</uib-accordion-group>
</script>
<script type="text/ng-template" id="smenuTree">
<uib-accordion-group>
<uib-accordion-heading >
{{submenu.label}}
</uib-accordion-heading>
<div ng-show="submenu.listChilds" ng-repeat="item in submenu.listChilds">
{{item.label}}
</div>
</uib-accordion-group>
</script>
<div ng-controller="MenuController">
<uib-accordion close-others="oneAtATime">
<div ng-repeat="menu in items" ng-include="'menuTree'"></div>
</uib-accordion>
</div>
http://plnkr.co/edit/ERURCsdvjhts1ujkYTrz?p=preview
I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr
See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>