This is snippet code.
<div class="row col-xs-12">
<a *ngFor="let rec of recipe "href="#" class="list-group-item clearfix">
<div class="float-left">
<h4 class="list-group-item-heading">{{rec.name}}</h4>
<p class="list-group-item-text">{{rec.description}}</p>
</div>
<span class="float-right">
<img [src]="rec.imagePath" alt="{{rec.name}}" class="img-responsive" style="max-height: 50px;">
</span>
</a>
<app-recipe-item></app-recipe-item>
I wonder why float-right don't align image to right side. If i use insetead pull-right it's working.I have read that bootstrap 4 we should float rather than pull.
I deleted list-group-item, list-group-item-heading , list-group-item-text and it worked.
<a href="#" class="clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4>{{ recipe.name }}</h4>
<p>{{ recipe.description }}</p>
I solved this by removing the xs-12 specifier in the col class.
<div class="row">
<div class="col">
<a href="#" class="list-group-item clearfix" *ngFor="let recipe of recipes">
<div class="float-left">
<h4 class="list-group-item-heading">{{ recipe.name }}</h4>
<p class="list-group-item-text">{{ recipe.description }}</p>
</div>
<span class="float-right">
<img
[src]="recipe.imagePath"
alt="{{ recipe.name }}"
class="img-responsive"
style="max-height: 50px"
/>
</span>
</a>
<app-recipe-item></app-recipe-item>
</div>
</div>
Related
I create add-to-cart app. I need each col in a row to display like it's mentioned col-lg-4 col-md-2 col-sm-6. But it's displayed in a column (Maybe it doesn't work because I added ng-repeat? And this style is the same for every item?
<h2 class="title">{{title}} <i class="em em-shopping_bags"></i></h2>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-2 col-sm-6">
<div class="card" style="width: 18rem;" ng-repeat='item in itemsArray'>
<img class="card-img-top" ng-src={{item.img}} alt="Card image cap">
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text">{{item.name}}</p>
<p class="price">{{ item.price | currency }}</p>
<i class="em em-shopping_trolley"></i> Add to cart <span class="number">{{ item.quantity }}</span>
</div>
</div>
</div>
</div>
</div>
I have looked at almost every solution I could find about this but I can't get my code to work. I wan't to put a banner after 3 ng-repeats
<div class="row products-row" ng-init="onInit()">
<div class="col col-34 fashion-product-container" ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div>
</div>
use $index
like
<div id="banner" ng-show="$index == 3"></div>
Now this will show banner div when its the third element of ng-repeat.
Your <div class="col-md-12" id="Banner" ng-if="$index==3">Banner</div> is outside of <div> containing ng-repeat tag. due to that $index is undefined.
Just put it inside the div of ng-repeat and it will work.
Try this:-
<div class="row products-row" ng-init="onInit()">
<div ng-repeat="product in results = fashionProducts | FashionFilter:params | orderBy:sortby_obj.propertyName:sortby_obj.reverse as fashionResults">
<div class="col col-34 fashion-product-container">
<div class="list card">
<div class="item item-image product-image-wrapper">
<pre-img ratio="_3_4">
<img class="product-image" ng-src="{{ product.image }}" spinner-on-load>
</pre-img>
</div>
<div class="item item-body product-description-wrapper">
<h5 class="product-title">
{{ product.name }}
</h5>
<p class="product-description">
<b class="actual-price bold-price">${{product.price_sale}}</b>
<span class="previous-price bold-price" ng-show="product.price != '0'">${{product.price}}</span>
</p>
</div>
</div>
</div>
<div class="col-md-12" id="Banner" ng-show="$index==3">Banner</div>
</div>
</div>
I have problem with Bootstrap carousel in ng-repeat, because images are not load one by one if carousel changes, but all images are load all at onece. I found similar questions in stackoverflow, but in my case I loading data from database (not use $scope)
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="product in main.products"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
The issue is that you are repeating all of your images inside an item of the carousel. A carousel item is defined by the "item" class. If you want a single image to displayed at once then repeat the items like so:
<div class="container">
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<!-- add the `active` class to the first item with one-time binding (if $index is 0) -->
<div class="item {{::($index === 0 ? 'active' : '')}}" ng-repeat="product in main.products track by $index">
<div class="row">
<div class="col-xs-3"><img ng-src="../../uploads/{{ product.imagePath }}" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
I am trying to align my carousel to the center but it is not functional as shown in the image.
Here is HTML code for it:
<div class="c-wrapper" position="absolute" align="center">
<div class="col-sm-6 col-md-6" position="absolute" align="center">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" margin: auto; width: 500px; position="absolute" align="center">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium"
class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
You only have added one div tag with - col-sm-6 col-md-6. so, it is only occupying the first six cells of the page. Bootstrap divides the page into 12 cells. so use 3 div tags and first empty div with value as col-sm-3 col-md-3, followed by second div you already have and add another empty div with value as col-sm-3 col-md-3.
<div class="col-sm-6 col-md-6">
|
|
</div>
Here is the fully functional code for carousel
<div class="col-md-12 col-lg-12">
<div class="col-md-6 col-lg-6" style="margin-left: 25%;">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="img/temple.jpg" alt="temple" class="img-responsive";>
</div>
<div class="item">
<img src="img/harmonium.jpg" alt="harmonium" class="img-responsive";>
</div>
<div class="item">
<img src="img/tabla.jpg" alt="tabla" class="img-responsive">
</div>
</div>
<a class="left carousel-control"
data-target="#carousel-example-generic" role="button"
data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control"
data-target="#carousel-example-generic" role="button"
data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<h4>
<p class="text-center"> <figcaption>culpa qui officia deserunt mollitia</figcaption> </p>
</h4>
</div>
</div>
</div>
Here are my html:
<div masonry id="graphicGridDiv">
<div class="masonry-brick" ng-switch on="{{graphic.length}}" ng-repeat="graphic in graphicArray">
<div ng-switch-when="1" class="col-sm-4 gra-mix-graphic ">
<div class="category_1 custom-menu-preview mix" ng-click="singleGraContent(graphic[0].id)">
<p class="video_title" title="title" ng-bind="$parent.graphic[0].name"></p>
<div class="gra-mix-inner">
<img ng-src="{{$parent.graphic[0].src}}" class="img-responsive">
</div>
<div class="caption">
<p class="video_detail" title="digest" ng-bind="$parent.graphic[0].digest"></p>
</div>
<div class="gra-mix-details-t">
<a class="mix-link but" title="delete" ng-click="graDelete($parent.graphic[0].id)">
<i class="fa fa-times"></i>
</a>
<a class="mix-preview but fancybox-button" title="edit" ng-click="graEdit(graphic[0])" >
<i class="fa fa-pencil"></i>
</a>
</div>
</div>
</div>
<div ng-switch-default class="col-sm-4 gra-mix-graphic">
<div class="gra-mix-details-t">
<a class="mix-link" title="delete" ng-click="graDelete(id)">
<i class="fa fa-times"></i>
</a>
<a class="gra-mix-preview fancybox-button" ng-click="graEdit(id)" title="edit**strong text**" data-rel="fancybox-button">
<i class="fa fa-pencil"></i>
</a>
</div>
<div class="category_1 custom-menu-preview" ng-click="multiGraContent(id)">
<div class="gra-mix-inner thumbnail">
<img ng-src="{{graphic[0].src}}" class="img-responsive" style="width: 330px;">
</div>
<div class="multiFirstTitle">
<p class="video_sub_title" title="{{graphic[0].name}}" ng-bind="graphic[0].name"></p>
</div>
<div class="multi" ng-repeat="mutiGra in graphic | arrayLimitFilter:1 ">
<p title="{{mutiGra.name}}" ng-bind="mutiGra.name" class="video_artical_title"></p>
<div class="multiImage" id="multiImageDiv">
<img ng-src="{{mutiGra.src}}" class="multiImage">
</div>
</div>
</div>
</div>
</div>
</div>
Here is the actual error text:
at Object.$watchCollectionAction [as fn] <div class="masonry-brick ng-scope" ng-switch="" on="{{graphic.length}}"
ng-repeat="graphic in graphicArray">
ng-controller is not specified anywhere in your HTML. Assuming your controller is named masonry you need to add ng-controller="masonry" to your outer div.