This is my template file from Angular:
<div class="container-fluid">
<div class="row">
<div class="col bg-dark text-white">
<a class="navbar-brand">SPORTS STORE</a>
</div>
</div>
<div class="row text-white">
<div class="col-3 bg-info p-2">
{{categories.length}} Categories
</div>
<div class="col-9 bg-success p-2">
{{products.length}} Products
</div>
</div>
</div>
So in the second one, so we have one row and two columns of 3 and 9 in that row.
My question is why they are breaking in two lines?
Related
while iterating the loop I am getting exact no of column for each row
I want to display 8 col 4 col in first row , 4 4 4 col in second row and 8 col 4 col in third row while applying loop
<div className="row">
{popularDestinations?.map((trip, index) => (
<div className= "col-lg-4 col-md-4 col-4" >
<div className="image-box">
<div className="name-desc hover-1 image-box rounded">
<img className="w-100" src={trip.image} alt="" />
<div className="hover-1-content p-2">
<div className="title text-left">
{trip.country} - {trip.price} {trip.currency}
</div>
<p className="hover-1-description mb-0">
<Link to="/country-page">
<strong>Click to Book</strong>{" "}
<i class="fa fa-angle-double-right"></i>{" "}
</Link>
</p>
</div>
</div>
</div>
</div>
))}
</div>
I'm using bootstrap carousel, where it's devided to items.
The first item should always be with active class and the others only class=item.
I'm requesting data, and getting response using angularjs, trying to fill the items with ng-repeat
now my problem is the first item should be class=item active, and get only 4 rows.
The other items should be with class=item and every item get only 4 rows.
The request response has more than 70 rows. i'm stuck here, how can I devide the 70 rows to 4 in the first active class, and the rest in the other items (4 rows in each item)
Carousel code :
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-sm-3"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center>
</div>
<div class="col-sm-3"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center>
</div>
</div>
</div>
</div>
Since you need to show 4 response array items in one carousel item, you can loop through your response array using ng-repeat and show only those items whose index is completely divisible by 4.For example you have 20 items in an array that you want to loop through.You can put a condition in your ng-repeat using ng-if to show only 0th,4th,8th,etc.. items i.e. ($index % 4 == 0) and inside that you can can show 0th,1st,2nd and 3rd items for first row , 4th,5th,6th and 7th for 2nd row ...and so on..
Here is a fiddle demonstrating the same.
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 am working with the code below and trying to determine what makes the cols stack on one another. The code looks fine in desktop view, but when I look at it on mobile, the last two col-xs-12 stack together right on top of one another. Is there a break code to make it put a hard return between the two col's in mobile viewing?
<div class="panel panel-default">
<div class="panel-body2">
<div class="row vertical-align">
<div class="col-xs-6 col-sm-3">
<h5><small>Saturday<br>
</small>Feb. 13</h5>
</div>
<div class="col-xs-6 col-sm-3 text-right">
<h5><small>TCU<br>
</small>Horned Frogs</h5>
</div>
<div class="hidden-xs col-sm-3 text-left">
<img src="http://www.wvusports.com/content/images/graphics/logos/TCU.png" width="45">
</div>
<div class="col-xs-12 col-sm-3 text-center">
<span class="label label-warning"><i class="fa fa-ticket"></i> ON SALE SOON</span>
<div>
<img class="hidden-xs" style="padding-top:2px" src="http://www.wvusports.com/content/images/graphics/logos/Big12.png" width="25">
</div>
</div>
<div class="col-xs-12">
<div class="alert alert-success" role="alert">Family Day - $70</div>
</div>
</div>
</div>
</div>
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>