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.
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>
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!
I'm trying to put in a col-md-offset-1 to push the content to right of left arrow by using col-md-offset-1, but the content never moves. I'm trying to get it all centered, but the left arrow is too close to the first bike. I can't seem to figure out why it's not moving since I'm staying withing 12 columns. Any suggestions.
HTML
<!DOCTYPE html>
<html ng-app='formApp'>
<head>
<title>Bicycle App</title>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="app.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<div class='row'>
<div class='col-md-12'>
<i class="fa fa-bicycle" aria-hidden="true"><span> {{"Bike Shop"}}</span></i>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<!-- end class not needed -->
<div class="chooseTitle">
Choose Your Bicycle
</div>
</div>
</div>
<!-- you missed md from offset, end class not needed -->
<div class="products" ng-controller="BikeController">
<div class="row">
<div class="col-md-1"><img ng-src="images/leftarrow.png"></div>
<div class="col-md-offset-1"></div>
<div class="col-md-3 text-center" ng-repeat="product in products | limitTo:-3">
{{product.manufacturer}}
<img id="bikePic" ng-src="{{product.image}}">
</div>
<div class="col-md-1"><img ng-src="images/rightarrow.png"></div>
</div>
</div><!--End controller-->
</div>
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bikeimageslider.js"></script>
</body>
</html>
CSS
.header{
font-style:italic;
background-color:black;
height:60px;
color:white;
font-weight:bold;
font-size:40px;
position:relative;
padding-top:10px;
padding-left:16px;
margin-left:-10px;
margin-right:-10px;
margin-top:-10px;
}
.header .fa {font-style:italic;
}
.bikeSelector{
color:green;
}
.chooseTitle{
font-size:60px;
}
.products{
color: #1E90FF ;
text-align:center;
font-size:40px;
}
#bikePic{
height:100%;
width:100%;
}
#bikePic, .products {
margin-top:40px;
}
You can use nesting with the grid to make the 12-columns smaller which is what you'll need to do in this case to get the entire layout centered...
http://codeply.com/go/4TkFUey6k9
Note: The CSS overrides you have will not work responsively.
I am recently trying Angular UI Layout (https://github.com/angular-ui/ui-layout) which is pretty straightforward to use. However, I found the UI layout always overlaps with navbar of Bootstrap.
YOu can take a look at it here: http://plnkr.co/edit/r5veawwbgz98bZjLdr1B
<!DOCTYPE html>
<html ng-app="x">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<title>UI.Layout Issue</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><i class="glyphicon glyphicon-envelope"></i><span>Website</span></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active">menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ui-layout style="position:relative; height:500px">
<div ui-layout-container style="border-style: solid;"><h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}" >
<div ui-layout-container style="border-style: solid;" ><h1>left</h1></div>
<div ui-layout-container style="border-style: solid;" ><h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;"><h1>bottom</h1></div>
</div>
<!-- Le javascript -->
<script type="application/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script type="application/javascript" src="https://rawgithub.com/angular-ui/ui-layout/v1.0.5/ui-layout.min.js"></script>
<script>
angular.module('x', ['ui.layout']);
</script>
</body>
</html>
A further investigation shows it is caused by the absolute positioning of UI layout. If I add a sytle:
<div ui-layout style="position:relative; height:500px">.
UI layout will not overlap with navbar anymore.
However, another issue arises, if the screen size changes, I have to manually change the height property of style.
So I am wondering whether there is any easy way to handle this.
Thanks
Derek
maybe it's too late, but i have the same problem and this is my solution :
simply add a fake div with size and max-size with value of your navbar's height to your ui-layout and make your navbar fix on top !
<nav class="navbar navbar-default navbar-fixed-top">
<div ui-layout>
<div ui-layout-container size="40px" max-size="40px" style="border-style: solid;">
<h1>fake</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>top</h1></div>
<div ui-layout-container>
<div ui-layout="{flow : 'column'}">
<div ui-layout-container style="border-style: solid;">
<h1>left</h1></div>
<div ui-layout-container style="border-style: solid;">
<h1>right</h1></div>
</div>
</div>
<div ui-layout-container style="border-style: solid;">
<h1>bottom</h1></div>
this is your plunker updated
You may wrap your UI-Layout to container with styles to prevent overlap:
.wrap {
position: absolute;
top: 50px;
left:0;
bottom:0;
right:0;
}
http://plnkr.co/edit/nRW2qbiwadyO1ICdgbQq
I have been following the docs for ui-bootstrap. And in the section(ui.bootstrap.collapse) they talk about making a collapse function for content when you click a button.
But I cannot seem to make the Collapse seem to work in my code.
What am I missing or doing wrong?
I have looked at other Stacks and have seen that other people use anchor tags instead of button tags. So I don't think that is the issue.
Index HTML
<!DOCTYPE html>
<html lang="en" data-ng-app="app">
<head>
<meta charset="UTF-8">
<meta name="description" content="stuff">
<meta name="keywords" content="stuff">
<meta name="author" content="stuff">
<title> Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<!-- Custom styles -->
<link href="css/style.css" rel="stylesheet">
<link href="css/svg_style.css" rel="stylesheet">
<!--Jquery -->
<script src="lib/jquery/dist/jquery.min.js"></script>
<!-- Angular -->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-route/angular-route.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<script src="lib/angular-cookies/angular-cookies.min.js"></script>
<!-- Bootstrap -->
<script src="lib/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="lib/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</head>
<body id="index_body">
<div data-ng-controller="HeaderCtrl">
<div class="top-header" data-ng-include="templateUrl"></div>
</div>
<div class="page [[ pageClass ]]" ng-view autoscroll="true"></div>
<!-- Main JS -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/headerCtrl.js"></script>
<script src="js/controllers/modal.js"></script>
<script src="js/controllers/ResonanceCtrl.js"></script>
<script src="js/controllers/ContactCtrl.js"></script>
<script src="js/controllers/LandingCtrl.js"></script>
<script src="js/controllers/SignInCtrl.js"></script>
<!-- Directives -->
<!-- <script src="js/directives/LandingAnimation.js"></script> -->
<script src="js/jq.js"></script>
</body>
</html>
Landing Page HTML
<div class="col-xs-12 col-sm-12 col-md-5">
<div class="caption">
<h1 class="text-left h-color thin">
Text Header
</h1>
<p class="lead p-color">More Text</p>
<!-- Here is my Toggle Button --> <a class="lead p-color learn-button togglebtn shake shake-rotate" data-ng-click="isCollapsed = !isCollapsed">
<small>
<i class="glyphicon" data-ng-class="{'glyphicon-minus': status.open, 'glyphicon-plus': !status.open}"></i> Learn More
</small>
</a>
</div>
</div>
<div class="hidden-xs hidden-sm col-md-7 col-lg-offset-1 col-lg-6">
<img alt="Image" class="img-responsive center-block" src="images/kip-animation.png" />
</div>
<!--Here is the what I want to collapse -->
<div id="myContent" collapse="isCollapsed" class="row row-offset row-pad" style="margin: 0 30px">
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 1</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 2</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"><small>Text</small>
</p>
</div>
</div>
<div class="col-xs-6 col-sm-4 col-md-4">
<div class="lead caption text-center">
<h3 class="h-color2">Item 3</h3>
</div>
<div class="thumbnail">
<img style="height: 100px; width: auto;" class="img-circle" src="images/logo-bunny.png" alt="Logo">
</div>
<div class="lead caption">
<p class="p-color"> <small>Some Text</small>
</p>
</div>
</div>
</div>
<!-- END DROPDOWN-->
App Javascript
var app = angular.module('app', ['ui.bootstrap', 'ngRoute', 'ngAnimate']);
app.config(function($interpolateProvider, $routeProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
$routeProvider
.when('/', {
templateUrl : 'pages/LandingPage.html',
controller : 'LandingCtrl'
})
.otherwise({ redirectTo: '/signin'});
});
Controller Javascript
app.controller('LandingCtrl', function($scope) { // jshint ignore:line
$scope.pageClass = 'page-landing';
$scope.isCollapsed = true;
});
I solved the issue. I was using Jquery before to toggle the display either hidden or shown.
In my Css I had:
myContent {
display: none;
}
Once I deleted that. It worked perfectly fine.