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>
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 a layout in mind that I'd like to look like this on a desktop monitor. It more or less works right now but I wonder if the 'D' and 'E' sections should be col-md-6 or col-md-3?
Desktop Layout
Also, (and this is where it gets interesting), on mobile I'd like it to be layed out like this:
Mobile Layout
Can one single layout work? I'm busy on the desktop layout but, yeah, everytime I switch to the mobile view things are not good. Therefore, I have a feeling my initial approach leaves something to be desired.
Solution code:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 col-md-push-3">
<div class="row">
<div class="col-xs-12">
<section class="box">B</section>
</div>
<div class="col-xs-6">
<section class="box">D</section>
</div>
<div class="col-xs-6">
<section class="box">E</section>
</div>
</div>
</div>
<div class="col-xs-6 col-md-3 col-md-pull-6">
<section class="box">A</section>
</div>
<div class="col-xs-6 col-md-3">
<section class="box">C</section>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<section class="box">F</section>
</div>
<div class="col-xs-6">
<section class="box">G</section>
</div>
</div>
</div>
I am getting started with angularjs and started working on a simple example. Overall I didn't ran into big challenges so far but this one i couldn't figure out... I have some $scope variables defined like this:
'use strict';
angular.module('portalApp')
.controller('summaryController', ['$scope', function ($scope) {
$scope.todayProduction = '8';
$scope.yesterdayProduction = '20';
$scope.monthlyProduction = '500';
$scope.dockedVessels = '16';
}]);
and this is my view html
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Today's Production</div>
<div style="font-size: 24px;">{{todayProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Yesterdays's Production</div>
<div style="font-size: 24px;">{{yesterdayProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Monthly Production</div>
<div style="font-size: 24px;">{{monthlyProduction}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="panel panel-default">
<div class="panel-body">
<div>
<span class="glyphicon glyphicon-stats" style="font-size: 50px;float: right;"></span>
<div>Docked Vessels</div>
<div style="font-size: 24px;">{{dockedVessels}}<span style="font-size: 12px;"> tons</span></div>
</div>
</div>
</div>
</div>
</div>
The problem is that when rendering I see the glyphicon as expected but instead of displaying the variable values I get "{{variableName}}" for all of them.
As a background the sample project I am using was originally for 1.5 version but I'm running a 1.6
Thanks in advance for your help!!
Change {{monthlyProduc tion}} to {{monthlyProduction}} in your html.
am new to angularjs.
I want to change the text of single button within ng-repeat after successful POST request.
html code
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id)">{{sendRequestButtonStatus}}</button>
</div>
</div>
</div>
From controller, am setting the button text to "Send Request" initially and i want it to show "awaiting Request" after successful POST request, but doing this all the buttons text are changing to "awaiting Request". I tried to sort it out but couldn't, can i get any help..
Controller
RequestAMeetingService.immediateMeetWithDoctor(payload, function (result) {
if(result.success) {
$localStorage.immediateMeetingID = result.data.data.meeting;
console.log($localStorage.immediateMeetingID);
console.log(result.data.data);
$scope.closeThisDialog();
$scope.sendRequestButtonStatus = "Awaiting Request";
AlertService.addSuccess(result.data.data.message);
}
else
{
AlertService.addError(result.data.data.err);
}
})
In that case , you have to define a buttons array , with the initial text as Send Request.
var buttonArray = ["Send Request"]; // array should match your ng-repeat length
Modify your ng-click method of your button such that it sends $index as the second argument.Then in your success modify the text according to index.
$scope.buttonArray[index] = "Awaiting Request";
This should be your html
<div class="row req-content-container" ng-show="selectedTopic">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 create-immediate-meeting-list-container" align="center" ng-repeat="item in allKOL">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<img class="profile-image-small" ng-src="{{imagesrc}}{{item.photo}}">
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" valign="middle">
<div class="row"><b><span class="pull-left">{{item.firstName}} {{item.lastName}}</span></b><br></div>
<div class="row"><b>Speciality</b><br>{{item.speciality}} </div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="row"> </div>
<div class="row"><b>Location</b><br>{{item.city}}</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="row"> </div>
<div class="row"><b>Convenient Hours</b><br>{{item.fromAvailable}} to {{item.toAvailable}}</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<button type="button" class="btn margin-top-10 request-button-style" ng-click="sendRequest(item.id, $index)">{{ buttonArray[$index] }}</button>
</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">