I am using Bootstrap 3 to create a page that contains a navbar which needs to be fixed (navbar-fixed-top) and a table below. The table is displayed correctly when I just use navbar-default. As soon as I add navbar-fixed-top, the table header seems to go under the navbar. Anything I am missing here ? The sample is available in Plnkr as well : http://plnkr.co/edit/cNVjIDI6C4vOKMHVWWrT?p=preview
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Interaction Summary Comparision View</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"></link>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-animate.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.0.1/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.8.1/angular-spinner.min.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/adonespitogo/angular-loading-spinner/master/angular-loading-spinner.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/restangular/1.5.2/restangular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.min.js"></script>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<!-- Angular logic -->
<script>
// Angular App
var app = angular.module('myApp', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'restangular', 'ngLoadingSpinner']);
app.factory('dataService', function($http, Restangular) {
var exports = {};
exports.getRestangular = function() {
return Restangular.setBaseUrl("https://cdn.rawgit.com/venkyvb/164b6c12a4f8bc72a02b12234a32bc9c/raw/daa51de397e90387ef51e07e25e971f24c667d0c");
}
exports.getData = function() {
return exports.getRestangular().all("summary.json").getList();
}
return exports;
});
// Controllers
app.controller('SummaryController', function($scope, $rootScope, $filter, dataService) {
$scope.summary = [];
dataService.getData().then(function(data) {
$scope.summary = data.plain();
},
function(data) {
// Error
});
$scope.downloadCsv = function() {
window.open('data:text/csv;charset=utf-8,' + escape(Papa.unparse(angular.toJson($scope.summary))));
};
});
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
var summaryList = {
name: 'SummaryList',
url: '/',
templateUrl: '/summary_list.html',
controller: 'SummaryController',
};
$stateProvider.state(summaryList);
});
</script>
<!-- Templates -->
<script type="text/ng-template" id="/summary_list.html">
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Summary View</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<span class="glyphicon glyphicon-download-alt" title="Download CSV"></span>
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" class="search form-control" ng-model="search.$" placeholder="Search in table">
</div>
</form>
</div>
</nav>
</div>
<div class="col-sm-12">
<div class="panel panel-default">
<div class="table-responsive">
<table class="table table-hover" ts-wrapper>
<thead>
<th>E2E time</th>
<th>Server time</th>
<th>Step</th>
<th>Total</th>
</thead>
<tr ng-repeat="entry in summary | filter:search" ts-repeat>
<td>{{ entry.e2e_time }}</td>
<td>{{ entry.server_time }}</td>
<td>{{ entry.step }}</td>
<td>{{ entry.total_transactions }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</script>
</head>
<body>
<div class="container-fluid">
<span us-spinner="{radius:30, width:8, length: 16}"></span>
<div data-ui-view></div>
</div>
</body>
</html>
Add this in your style
body{
margin-top:70px;
}
#media(max-width: 768px){
body{
margin-top:180px;
}
}
You must use margin-top style on your table
Sadly, bootstrap 3 never included a padding or a margin when you make a navbar fixed. So you should do it manually.
.col-sm-12 {
width: 100%;
margin-top: 3%;
}
This would give some margin!
Related
I have a search button with an <input> field. The button has ng-click="run()" which works immediately typing inside the input field. Isn't it suppose to work after the button is clicked?
I am new on AngularJS. Got stuck at this point.
Thanks in advance.
<!DOCTYPE html>
<html lang="en" ng-app="myApp" ng-controller="MovieController">
<head>
<title ng-bind="'trivago.com: ' + details.Title"></title>
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<div class="container-fluid outerdiv">
<nav class="navbar navbar-fixed-top">
<div class="container-fluid" style="border-bottom:2px solid #C1C3C5;">
<div class="navbar-header">
<a class="navbar-brand" href="#"><b><span style="color:#027FAE;">tri</span><span style="color:#F48E05;">va</span><span style="color:#C84735;">go</span></b><!--<span class="span-style">Movie Browser</span>--></a>
<a class="fa fa-heart" href="#"></a>
<a class="navbar-brand" href="#">GBP</a>
<a class="navbar-brand" href="#">EN</a>
<a class="navbar-brand" href="#">MY PROFILE</a>
</div>
</div>
</nav>
<noscript>
<div class="nojs">Javascript is either disabled or not supported in your browser. Please enable it or use a Javascript enabled browser.</div>
</noscript>
<center><div class="az">
<!--<div class="animated zoomInRight">-->
<p class="text-center" style="color:#057AA9; font-size:28px;">Find your ideal hotel <br>for the best price </p>
<div class="input-group search-bar animatedz">
<input float="right" type="text" ng-model="search" ng-model-options="{ debounce: 800 }" class="form-control" autofocus />
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="run()">Search</button>
</span>
</div>
<div id="main-info" ng-include="'partials/main-info.html'" class="col-md-8"></div>
<!--<div id="related-results" ng-include="'partials/related-results.html'" class="col-md-4 animated bounce related-results"></div>-->
</div></center>
</div>
<script src="js/angular.min.js"></script>
<script src="js/app.js"></script>
<div class="container footer">
<div class="col-xs-4">
<center><i class="fa fa-search"></i></center>
<p class="text-center">Find your ideal hotel at the best price <br> with the world's largest hotel search</p>
</div>
<div class="col-xs-4">
<center><i class="material-icons"></i></center>
<p class="text-center">Compare over 1 million hotels<br>from 250+ sites</p>
</div>
<div class="col-xs-4">
<center><i class="fa fa-smile-o"></i></center>
<p class="text-center">Read the unbiased and <br>accurate traveller reviews</p>
</div>
</div>
</body>
</html>
app.js:
'use strict';
$scope.search = "Up";
function fetch(){
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response){ $scope.details = response.data; });
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response){ $scope.related = response.data; });
}
$scope.update = function(movie){
$scope.search = movie.Title;
};
$scope.run= function(){
fetch();
}
});
Here's a working example with most of your code, hope it helps.
function exampleController($scope, $http) {
function fetch() {
$http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
.then(function(response) {
$scope.details = response.data;
});
$http.get("http://www.omdbapi.com/?s=" + $scope.search)
.then(function(response) {
$scope.related = response.data;
});
}
$scope.update = function(movie) {
$scope.search = movie.Title;
};
$scope.run = function() {
fetch();
};
}
angular
.module('app', [])
.controller('exampleController', exampleController);
.container-fluid {
background-color: #1D1F20;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.row {
padding: 10px;
}
.input {
color: #333;
}
pre {
margin-bottom: 10%;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid" ng-app="app">
<div class="container" ng-controller="exampleController">
<div class="row">
<input class="input" type="text" ng-model="search" />
</div>
<div class="row">
<button class="btn btn-primary" ng-click="run()">Start Search</button>
</div>
<div class="row">
<pre ng-bind="details | json"></pre>
</div>
</div>
</div>
Why is the horizontal collapse jerky? It starts to open normally, stops for a bit, and then opens completely. There are no margins, nor padding on the elements in this example
https://plnkr.co/edit/85K7YhCG0inVpcwAhyjC?p=preview
Edit: It runs smoother if I put a fixed width on the contents (Set ul to width 400px). Is this the only way?
html
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.2.0/ui-bootstrap-tpls.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default" role="navigation" ng-init="nc=true;">
<div class="navbar-header">
<div class="uib-collapse" uib-collapse="nc" horizontal>
<ul class="">
<li ng-repeat="menu in fm.genericMenus" class="" >
<a class="" href="" ng-href="{{menu.Url}}" ng-bind="menu.Text"></a>
</li>
</ul>
</div>
<button type="button" class="navbar-toggle" ng-click="nc=!nc">
<span class="sr-only">Toggle navigation</span>
<span>Click</span>
</button>
<a href="#" class="logo">
<img src="https://upload.wikimedia.org/wikipedia/bar/a/a6/Nintendo-Logo.svg" />
</a>
</div>
</nav>
</body>
</html>
css
.logo img {
width:100px;
}
ul {
padding:0;
}
li {
display:inline-block;
padding: 10px 5px;
}
a {
font-size:8px;
}
.uib-collapse, button {
float:right;
height:50px;
}
button {
margin:0 !important;
}
.collapsing {
transition-duration:3s;
}
js
var app = angular.module('app', ['ui.bootstrap', 'ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.fm = {
genericMenus:[
{Text:'CALENDAR'},
{Text:'BUYING'},
{Text:'SELLING'},
{Text:'DEPARTMENTS'},
{Text:'NEWS & VIEWS'}
]
};
});
Looks like a bug with the library. I'm getting the same behavior on the bootstrap demo page. Less noticeable because they have faster easing, but it's there. Your workaround seems like a good interim solution.
I have checked all the available solution but didn't help me to resolve the problem.
I have simple code but it fails to run with the mentioned error.
Here is my code
index.html
<!DOCTYPE html>
<html data-ng-app="piApp">
<head>
<script data-require="system.js#*" data-semver="0.16" src="https://jspm.io/system#0.16.js"></script>
<script data-require="angular.js#*" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="piController">
<div class="container-
fluid">
<div class="row">
<div class="col-xs-12">
<h1> Dash Board</h1>
</div>
</div>
<div class="row">
<div
class="col-xs-12">
<table class="table table-striped table-hover">
<tbody>
<tr data-ng-repeat="item in data">
<td>{{item.name}}</td>
<td>{{item.value}}</td>
</tr>
</tbody>
</table>
<div class="form-group">
<button data-ng-="" click="getControllPanel()" class="btn btn-primary">Control Panel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Here is the script.js
'use strict';
var app = angular.module('piApp',[]);
app.controller("piController", ["$scope",
function($scope) {
$scope.data =
[{
name: "Temperature",
value: 25
},
{
name: "Humidity",
value: 75
},
{
name: "Humidity2",
value: 75
}];
}]);
Not able to understand what is causing the mentioned error?
Do I need to have the angular.min.js locally?
Am I missing something trivial?
You have added dependency of angular2, and you have written code of angularjs
Also, you cannot use "data-ng-app" before loading the script. So remove it from html tag, and add it in body.
Add following line in head:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
and remove the first two lines which has dependency of systemjs and angular2
i am trying to use $http GET requests but it is not working and i don't know what is wrong with it and am not also getting any errors in the console ,this is the whole code that am using
<!doctype html>
<html lang="en" ng-app="twitchApp">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TwichTv</title><!-- End of Title -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container contentContainer">
<div class="contentWrapper">
<div class="innerContent">
<!-- Nav tabs -->
<ul class="nav nav-tabs statusBar" role="tablist">
<li role="presentation" id="all" class="active">All</li>
<li role="presentation" id="online">Online</li>
<li role="presentation" id="offline">Offline</li>
</ul>
<!-- Tab panes -->
<div ng-controller="allUsersController" class="tab-content result">
<div role="tabpanel" class="tab-pane active" id="allTab">
<div class="well">
<div class="userLogo">
<img ng-src="{{ image }}">
</div>
<h3 class="username">{{ userName }}</h3>
<p><span class="info">{{ channelStatusInfo }}</span></p>
<div class="pull-right">
<span class="statusIcons"><i id="icon" class="fa fa-user green"></i></span>
</div>
</div>
</div>
<div ng-controller="onlineUsersController" role="tabpanel" class="tab-pane" id="onlineTab">
<div class="well"></div>
</div>
<div ng-controller="offlineUsersController" role="tabpanel" class="tab-pane" id="offlineTab">
<div class="well"></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and javascript
var streamers = ["freecodecamp", "storbeck", "terakilobyte", "habathcx", "RobotCaleb", "thomasballinger", "noobs2ninjas", "beohoff", "brandonlehr", "MedryBW"];
var streamurl = "https://api.twitch.tv/kraken/streams/";
var userurl = "https://api.twitch.tv/kraken/users/";
var online = "green glyphicon glyphicon-user";
var offline = "glyphicon glyphicon-user";
var twitchApp = angular.module("twitchApp", []);
twitchApp.controller("allUsersController",[ '$scope', '$http', allUsersController]);
function allUsersController($scope, $http) {
streamers.forEach(function(streamer){
var userUrl = "https://api.twitch.tv/kraken/users/" + streamer;
var req = {
method : 'GET',
url: userUrl
};
$http(req).then(function(result) {
var streamUrl = "https://api.twitch.tv/kraken/streams/" + streamer;
$http({
method: 'GET',
url: streamUrl
}).then(function(data){
$scope.userName = result.name;
if(result.logo === null) {
$scope.image = "http://fit.ie/fitnew/wp-content/uploads/2014/11/no-profile-image.jpg";
}
// check if streamer is streaming
if(data.stream === null) {
$('#icon').removeClass('green');
} else {
var ii = data.stream;
for(var item in ii) {
$scope.channelStatusInfo = ii.channel.status;
}
}
});
});// the main then callback
});// the forEach loop
}
so can anyone help with why it is not working
I have different images when user select option from the drop down box, display different images but i am getting same images.
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="UTF-8">
<title>Hourlies</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js">
</script>
<script src="https://code.angularjs.org/1.5.0-beta.0/angular-route.min.js"></script>
<style>
.container{
margin-top: 10%;
background-color: rgb(245,245,245);
}
.wi{
width: 270px;
height: 300px;
border:3px solid black;
margin-top: 1%;
}
</style>
</head>
<body>
<div class="container">
<div class="col-lg-3">
</div>
<!-- end of col-3 -->
<div class="col-lg-9">
<div ng-controller="myCtrl">
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<br><br>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
<img src='{{selectedItem}}' class="wi"/>
</div>
<!-- end of col-9 -->
</div>
<!-- enf of main container -->
<script>
var app=angular.module('demo',['ngRoute']);
app.controller('myCtrl', function($scope) {
$scope.selectables = [
{
label: ' vallay',
value: 'http://www.quackit.com/pix/routeburn_track/routeburn_flats_t.jpg',
vlue:'http://www.freeimageslive.com/galleries/transtech/informationtechnology/preview/blue_screen.jpg',
value:'http://www.freeimageslive.com/galleries/transtech/informationtechnology/preview/chiclet_keyboard.jpg'
},
{ label: 'Tejas',
value: 'http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg'
}
];
});
</script>
</body>
</html>
You haven't added the function $scope.fun in your controller that you're calling from your dropdown; add it:
app.controller('myCtrl', function($scope) {
...
$scope.fun = function (){
//Call API here, Pass selected model and in success method of api set $scope.selectedObj = response;
//response is may be something like this {name:"category1", imageSrc: ["photo1.jpg","photo2.jpg".....]}
};