I have a layout with 4 columns, 4x col-md-3. When I try to make the screen smaller, these columns have to behave to first 3 columns, then 2, and then 1 when the screen is too small.
But they don't, the columns just become smaller, and don't move beneath the other columns.
I must be missing something.
Code:
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
</div>
Try with this option.
<div class="row-fluid vakanties_strip_wrapper">
<div ng-repeat="vakantie in vakanties">
<a ui-sref="details_vakantie/({ vakantieId: vakantie.ID })">
<div class="col-xs-12 col-sm-6 col-lg-3">
<div class="vakantie_blok" ng-class="$even ? 'red' : 'blue'">
<div class="vakantie_strip_img">
SOME IMAGE
</div>
<div class="vakantie_strip_tekst_beschr">
SOME TEXT
</div>
</div>
</div>
</a>
</div>
<div class="clearfix"></div>
Related
I have one problem with angular ng-repeat and bootstrap. I tried divide view on two parts left image, right description, but next line oposite, left description and right image. I would like something like picture below
<div class="container">
<div class="row">
<div ng-repeat="item in items">
<div class="col-xs-6">
<img src="{{item.image}}" alt="#"/>
</div>
<div class="col-xs-6">
<div class="description">
<p>{{item.description}}</p>
</div>
</div>
</div>
</div>
</div>
You can check for odd or even iteration in the repeat loop and apply your class with either float left or right respectively.
<div class="container">
<div class="row">
<div ng-repeat="item in items" ng-class-odd="'img-left'">
<div class="col-xs-6 img-holder">
<img src=".." alt="#"/>
</div>
<div class="col-xs-6 text-holder">
<div class="description">
<p>........</p>
</div>
</div>
</div>
</div>
</div>
CSS
.img-left .img-holder{
float:left;
}
.img-left .text-holder{
float:right;
}
you can handle even condition directly in CSS or like above.
This is my solution. Using ng-class we check if the current index ($index) divided by 2 is zero then we add the float classes either .left or .right.
JSFiddle Demo
<div ng-controller='MyController'>
<div ng-repeat="val in arr">
<div class="row clearfix">
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'left':'right'">
{{val}}
</div>
<div class="col-xs-6" ng-class="$index % 2 === 0 ? 'right':'left'">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
</div>
</div>
</div>
Please see below code, which is running fine.
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
Its giving result in 3 separate lines without any CSS.
I want to display like tree/table with row within row.
You are closing the first row before opening the nested ones.
Try this:
<div ng-repeat="download in productDownloads"
class="container">
<div class="row">
<div class="cell">
<strong>{{download.productName}}</strong>
</div>
<div ng-repeat="release in download.productReleasesList">
<div class="row">
<div class="cell">
{{release.downloadName}}
</div>
</div>
<div ng-repeat="downloadDetail in release.downloadDetailList">
<div class="row">
<div class="cell">{{downloadDetail.downloadName}}</div>
</div>
</div>
</div>
</div>
</div>
I have the next code in Html and AngularJS:
<div class='row'>
<div class='col-md-6' ng-repeat='post in news'>
<div class='post-content'>{{ post.title }}</div>
</div>
</div>
Now, what I need is to push a row with two columns every four posts.
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
How do I do it in AngularJS?
The DOM result what I'm looking for is:
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
<div class='col-md-6'>
<div class='add-content'>Something</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
...
essentially you need to be using the built in $index which keeps track on the index it is currently on. Every fourth item implies it should be divisible by four. You also need an ng-if statement to determine wether a dom snippet should be added on said item. Also this calls for the use of the ng-repeat-start instead of ng-repeat. Its seldom used but for this purpose it should work. Code below :
<div class='row' ng-repeat-start="post in news" >
<div class='post-content'>{{ post.title }}</div>
</div>
<div class="row" ng-repeat-end ng-if="($index +1 ) % 4 === 0" >
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
<div class='col-md-6'>
<div class='post-content'>POST TITLE</div>
</div>
</div>
I have a page to display my friends list for our web application. My problem is that I cant restrict the number of friends shown in one row. I have to display 3 friends in each row:
<div class="row" style="padding-left:200px;">
<div ng-repeat="favourite in favouriteData.data.result">
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="fav_image" >
<img ng-src='/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
</div>
plz help to resolve the issue
If you want to always display 3 columns per row (independently from the screen width) you can simply use col-xs-4 (enclosing in a <div class="row"> containing ng-repeat):
<div class="row" ng-repeat="favourite in favouriteData.data.result" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="fav_image">
<img ng-src='http://192.168.1.75/zentiera/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
The best way is to use 'limitTo' filter component in ng. Here is documentation
<div ng-repeat="favourite in favouriteData.data.result | limitTo:3">
I was wondering if there is an option that foundation 4 tabs goes to dropdown when window become small.
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
Here, links are just inside .
In foundation you can use visibility classes to control the elements based on screen sizes.
using visibility classes show-for-small-only and hide-for-small-only we present the div
respectively
<div class="show-for-small-only">
Dropdown Button<br>
<ul id="drop1" data-dropdown-content class="f-dropdown">
<li>This is a link</li>
<li>This is another</li>
<li>Yet another</li>
</ul>
</div>
<div class="hide-for-small-only">
<dl class="tabs" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content">
<div class="content active" id="panel2-1">
<p>First panel content goes here...</p>
</div>
<div class="content" id="panel2-2">
<p>Second panel content goes here...</p>
</div>
<div class="content" id="panel2-3">
<p>Third panel content goes here...</p>
</div>
<div class="content" id="panel2-4">
<p>Fourth panel content goes here...</p>
</div>
</div>
</div>