I am using bootstrap's popover, but I don't want the popover overflow it's wrapper, any ideas?
Demo on Plunker
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<script data-require="bootstrap.js#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css#*" />
<script src="controller.js"></script>
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false">
</datepicker>
</script>
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="popover.css">
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<p>BAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababbBAbababababbabababababababababababababbabaabbabaabababb</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-panel">
<div class="card-body">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row" ng-repeat="item in weaponItems">
<div class="col-xs-12">
<div class="col-xs-6" ng-click="selectItem(item)" uib-popover-template="'popover.html'" popover-is-open="isOpen && item === selectedItem" popover-trigger="click" popover-placement="auto right">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think I don't make my question clear, see the attached imagethe red line surrounded area is the card-panel area, and the green line surrounded is the popover. Here, I don't want the popover beyond the panel area.
Declare word-wrap on the overflowing element.
.card-body p{
word-wrap: break-word;
}
Related
I am using AngularJS for the very first time and I am writing down the HTML script of the page over here:
<!DOCTYPE html>
<html>
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script>
alert("india");
function questionController($scope) {
$scope.queList = ['a', 'b'];
alert("India");
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
</script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;"><h1>Stack Overflow</h1></div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'"/>
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'"/>
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'"/>
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'"/>
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
</div>
<!-- Always on top. Fixed position, fixed width, relative to content width -->
<div class="sidebar2">
<div class="metapost">
<h4 class="headertitle">Hot Meta Post</h4>
<div class="sidebarinnerdiv">Is it useful to edit a question I will vote to close? </div>
<div class="sidebarinnerdiv">Rewriting a Waffle question</div>
</div>
<div class="networkquestions">
<h4>Hot Network Questions</h4>
<div class="sidebarinnerdiv">How to pronounce the English alphabet? (A, B, C, ...)</div>
<div class="sidebarinnerdiv">Why does the Black Lives Matter movement organize protests while the incident they're protesting is still under investigation?</div>
</div>
</div>
</div>
<!-- Always at the end of the page -->
<footer>
Copyright 2016, Stack Overflow
</footer>
</body>
</html>
It is not working and I am seeing {{question}} on the page. I am not able to trace down the source of the error. Please help me make my page work.
You forgot to add ng-app="queApp"
function questionController($scope) {
$scope.queList = ['a', 'b'];
}
var queApp = angular.module("queApp", []);
queApp.controller("queCtrl", questionController);
<!DOCTYPE html>
<html ng-app="queApp">
<head>
<title>_LayoutPersonal</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-3.1.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.12.0.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<!-- Always on top: Position Fixed-->
<header>
Stack Overflow
</header>
<div class="subheader">
<div style="float:left;">
<h1>Stack Overflow</h1>
</div>
<div class="sidebar3">
<input type="button" id="btnQuestions" value="Questions" onclick="location.href='/Question/Show'" />
<input type="button" id="btnJobs" value="Jobs" onclick="location.href='/Question/Show'" />
<input type="button" id="btnTags" value="Tags" onclick="location.href='/Question/Show'" />
<input type="button" id="btnUsers" value="Users" onclick="location.href='/Question/Users'" />
<input type="button" id="btnBadges" value="Badges" onclick="location.href='/Question/Badges'" />
<input type="button" id="btnAskQuestion" value="Ask Question" onclick="location.href='/Question/Ask'" />
Ask Question
</div>
</div>
<!-- Fixed size after header-->
<div class="content">
<!-- Scrollable div with main content -->
<div id="scrollable2">
<h3>Questions</h3>
<a href="/Question/Show/1">
<div class="questionlistitem">
<label for="Model_binding_MVC_3_not_working_as_expected">Model binding MVC 3 not working as expected</label>
<label for="">9/14/2016 12:00:00 AM</label>
</div>
</a>
<a href="/Question/Show/2">
<div class="questionlistitem">
<label for="Business_logic_layer_in_ASP_NET_MVC_-_Architecture">Business logic layer in ASP.NET MVC - Architecture</label>
<label for="">9/10/2016 12:00:00 AM</label>
</div>
</a>
<div ng-controller="queCtrl">
<div ng-repeat="question in queList">
{{question}}
</div>
</div>
First of all you need 'ng-app="queApp"' in order to use AngularJS (Basics AngularJS)
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.
in app.js
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
in controller.js
angular.module('PoliticalOrg').controller('HomePageController',function( $scope ) {
$scope.Login= function () {
alert("s");
}
});
in index.html
<!DOCTYPE html>
<html lang="en" ng-app="PoliticalOrg">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta charset="utf-8">
<title>Organization</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="" name="description">
<meta content="" name="author">
<link href="assets/plugins/pace/pace-theme-flash.css" rel="stylesheet" type="text/css" media="screen">
<!-- BEGIN CORE CSS FRAMEWORK -->
<link href="assets/plugins/boostrapv3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/boostrapv3/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="assets/css/animate.min.css" rel="stylesheet" type="text/css">
<link href="assets/plugins/jquery-scrollbar/jquery.scrollbar.css" rel="stylesheet" type="text/css">
<!-- END CORE CSS FRAMEWORK -->
<script src="libs/vendor/angularJS/angular.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script type="js/login/services.js"></script>
<script type="js/globalmethods/login.js"></script>
<!-- BEGIN CSS TEMPLATE -->
<link href="assets/css/style.css" rel="stylesheet" type="text/css">
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom-icon-set.css" rel="stylesheet" type="text/css">
<!-- END CSS TEMPLATE -->
<script src="js/app.js"></script>
<script src="js/Controllers.js"></script>
<script src="js/registration/config.js"></script>
<script src="js/registration/Controllers.js"></script>
<script src="js/login/config.js"></script>
<script src="js/login/Controllers.js"></script>
<script src="js/login/services.js"></script>
<script src="js/candidate/config.js"></script>
<script src="js/candidate/Controllers.js"></script>
<script src="js/candidate/services.js"></script>
<script src="js/submemberrequests/config.js"></script>
<script src="js/submemberrequests/Controllers.js"></script>
<script src="js/submemberrequests/services.js"></script>
<script src="js/messages/config.js"></script>
<script src="js/messages/Controllers.js"></script>
<script src="js/messages/services.js"></script>
<script src="js/users/config.js"></script>
<script src="js/users/Controllers.js"></script>
<script src="js/users/services.js"></script>
<script src="js/admin/config.js"></script>
<script src="js/admin/Controllers.js"></script>
<script src="js/admin/services.js"></script>
<script src="js/users/services.js"></script>
<script src="js/globalmethods/map.js"></script>
<script src="js/globalmethods/login.js"></script>
</head>
<!-- END HEAD -->
<!-- BEGIN BODY -->
<body class="boxed-layout breakpoint-1024 pace-done grey"><div class="pace pace-inactive"><div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<!-- BEGIN HEADER -->
<div class="container">
<div class="header navbar navbar-inverse ">
<!-- BEGIN TOP NAVIGATION BAR -->
<div class="container">
<div class="navbar-inner">
<div class="header-seperation" style="display: none; height: 61px;">
<ul class="nav pull-left notifcation-center" id="main-menu-toggle-wrapper" style="display:none">
<li class="dropdown"> <a id="main-menu-toggle" href="#main-menu" class=""> <div class="iconset top-menu-toggle-white"></div> </a> </li>
</ul>
<!-- BEGIN LOGO -->
<img src="assets/img/logo.png" class="logo" alt="" data-src="assets/img/logo.png" data-src-retina="assets/img/logo2x.png" width="106" height="21">
<!-- END LOGO -->
<ul class="nav pull-right notifcation-center">
<li class="dropdown" id="header_task_bar"> <div class="iconset top-home"></div> </li>
<li class="dropdown" id="header_inbox_bar"> <div class="iconset top-messages"></div> <span class="badge animated bounceIn" id="msgs-badge">2</span> </li>
<li class="dropdown" id="portrait-chat-toggler" style="display:none"> <div class="iconset top-chat-white "></div> </li>
</ul>
</div>
<!-- END RESPONSIVE MENU TOGGLER -->
<div class="header-quick-nav">
<!-- BEGIN TOP NAVIGATION MENU -->
<!-- END TOP NAVIGATION MENU -->
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
</div>
<!-- END TOP NAVIGATION MENU -->
</div>
<!-- END TOP NAVIGATION BAR -->
</div>
</div>
<!-- END HEADER -->
<!-- BEGIN CONTAINER -->
<div class="page-container row-fluid">
<!-- BEGIN SIDEBAR -->
Scroll
<!-- END SIDEBAR -->
<!-- BEGIN PAGE CONTAINER-->
<div class="page-content condensed" data-height="679">
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div id="portlet-config" class="modal hide">
<div class="modal-header">
<button data-dismiss="modal" class="close" type="button"></button>
<h3>Widget Settings</h3>
</div>
<div class="modal-body"> Widget settings form goes here </div>
</div>
<div class="clearfix"></div>
<div class="content">
<div class="page-title">
<h3>Home Page</h3>
</div>
</div>
</div>
<!-- BEGIN CHAT -->
<!-- END CHAT -->
</div>
<!-- END CONTAINER -->
<!-- BEGIN CORE JS FRAMEWORK-->
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-ui/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script src="assets/plugins/boostrapv3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/breakpoints.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-unveil/jquery.unveil.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-block-ui/jqueryblockui.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-scrollbar/jquery.scrollbar.min.js" type="text/javascript"></script>
<!-- END CORE JS FRAMEWORK -->
<!-- BEGIN PAGE LEVEL JS -->
<script src="assets/plugins/pace/pace.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-numberAnimate/jquery.animateNumbers.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN CORE TEMPLATE JS -->
<script src="assets/js/core.js" type="text/javascript"></script>
<script src="assets/js/chat.js" type="text/javascript"></script>
<script src="assets/js/demo.js" type="text/javascript"></script>
<!-- END CORE TEMPLATE JS -->
</div><div style="left: -1000px; overflow: scroll; position: absolute; top: -1000px; border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"><div style="border: none; box-sizing: content-box; height: 200px; margin: 0px; padding: 0px; width: 200px;"></div></div></body></html>
I mentioned app.js and controller.js in index.html. Here's the problem I am facing. When I click on the login button in index.html ng-click="Login()" function defined in HomePageController the Login function is not called.
This happened because the controller is not loaded correctly, you were trying to load the controller form the index.html page at the same time you included your scripts on index.html page.
$routeProvider.when('/', {
templateUrl : appUrl + '/index.html',
controller : 'HomePageController'
});
so what you should do is breakdown your views using ui-view.
put the folowing in home.html file
<!-- BEGIN CHAT TOGGLER -->
<div class="pull-right">
<div class="chat-toggler">
<a href="#" class="dropdown-toggle" id="my-task-list" data-placement="bottom" data-content="" data-toggle="dropdown" data-original-title="">
<div class="user-details">
<div class="username">
<span class="bold">Login</span>
</div>
</div>
<div class="iconset top-down-arrow"></div>
</a>
<div id="notification-list" style="display:none">
<div style="width:300px">
<div class="grid-body no-border">
<div class="row-fluid">
<p>Enter your username and password to login</p>
<br>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="text" id="email" name="email" class="form-control" placeholder="someone#example.com">
<span class="add-on"><span class="arrow"></span><i class="fa fa-align-justify"></i> </span> </div>
</div>
<div class="row form-row">
<div class="input-append col-md-10 col-sm-10 primary">
<input type="password" id="password" name="password" class="form-control" placeholder="your password">
<span class="add-on"><span class="arrow"></span><i class="fa fa-lock"></i> </span> </div>
</div>
</div>
<div class="form-actions">
<div class="pull-right">
<button type="button" ng-click="Login()" value="Login" class="btn btn-primary btn-cons-md"> login</button>
<button type="button" class="btn btn-white btn-cons-md">Clear</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END CHAT TOGGLER -->
and add ui-view in the index.html instead of the above code. then change the route like this
$routeProvider.when('/', {
templateUrl : appUrl + '/home.html',
controller : 'HomePageController'
})
i.e you should initialize the index.html from the file not from the route
Follow this ui-router documentation.
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.
I succeeded without problems to launch the carousel in it standard form. Now, I would like to use the thumbnails below the carousel to select and force the image I want to see. This feature is on top of what exists within the carousel already. Ideally I wish to have a also an "active" class that I can use on the thumbnails to highlight which thumbnail I currently have on display in the carousel.
If somebody can help me for this next step.
thanks a lot
Peter
<html ng-app="myApp">
<head>
<title>Bootstrap tests</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container" ng-controller="Ctrl">
<h1>test Carousel</h1>
<div class="row">
<div >
<carousel interval="myInterval">
<slide ng-repeat="image in images" active="image.active">
<img ng-src="{{image.image}}" >
<div class="carousel-caption">
<p>{{image.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="clearfix"></div>
<div class="row" style="background-color:sienna">
<div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" ng-repeat="image in images" ng-click="select(slide)">
<div class="thumbnail">
<img src="{{image.thumbnail}}">
</div>
</div>
</div<
</div>
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="js/underscore-min.js"></script>
<script src="js/jquery-1.11.0.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-custom-tpls-0.10.0.min.js"></script>
<script type="text/javascript" src="js/servicesGetImages.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
use ng-class here like this:
<slide ng-repeat="image in images" ng-class="{ active : 'image.active'}">