Here's a plunk I've been working on for another question. I'm not sure what I'm doing wrong, but I see the bootstrap examples (plunk), and they look like this:
While mine looks like this (specifically look at the panel-headings / panel-titles):
My panel-heading has no styling at all, even though we're using practically the same code:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<body ng-controller="MainCtrl">
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-header">
<h4 class="panel-title" uib-tooltip="ok">ui-grid tester</h4>
</div>
<div class="panel-body">
<button ng-click="changeColumn2Text()">Change Column 2 Text</button>
<br />
<br />
<div class="grid" ui-grid="gridOptions" ui-grid-selection=""></div>
</div>
</div>
</div>
</body>
The only difference is their panel is in a template (on the same page, with no special styles or classes) to use for an accordion, which doesn't seem to me like it should affect the styling.
So what am I doing wrong?
change panel-header with panel-heading class
Related
I use AngularJS and I have the following template_
<div class="wrapper">
<div class="as-container">
<div ui-view="header"></div>
<div class="apoSoftContainer">
<div class="row clearfix">
<div class="col-md-12 column" ui-view="content"></div>
</div>
</div>
</div>
<div class="as-footer">
<div ui-view="footer"></div>
</div>
</div>
A span- Tag in my Footer looks like this:
</span> Version <span style="font-weight:normal;">Some Text</span></span>
There is no controller or service for the footer.
My aim is that when I click onto "Some Text" than a modal should be open but I don't know where to place the code?
If you already got the code to open a modal, I suggest you create a controller for it.
I usually wrap my entire application using a "mainController". That way, I can use it for head elements, footer, etc.
<!DOCTYPE html>
<html ng-app="WebApp" ng-controller="mainController as main">
<head>
<title>{{main.myTitle}}</title>
</head>
</body>
<footer>
<span ng-click="main.openModal()">Click here!</span>
</footer>
</body>
</html>
I built an online interview. The form uses Angular.js and Bootstrap to display questions and answers. Each answer is attached to a point value that gets summed and totaled at the end for a test score.
The application works wonderfully on Chrome and Safari (both desktop apps), and in Chrome Dev Tools, it simulates well on a multitude of mobile screens. However, when I view the app on an actual mobile device, I am unable to select an answer among the radio buttons. What can I do to debug?
Is Angular.js likely the cause? Perhaps this is a known problem with Bootstrap? How do I troubleshoot and repair?
Live Site (works on desktop currently (April 7,2016), but not on mobile):
http://libertas-security466.info/interview
test.html (Template for each question/answer set)
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>{{question.text}}</h1>
<p ng-show="question.subtext">{{question.subtext}}</p>
</div>
<div class="col-sm-12">
<p>Remaining Questions: {{questionsLeft}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form class="form">
<div class="form-group">
<div class="input-group" ng-repeat="answer in question.answers">
<div class="input-group-addon">
<input type="radio" name="radioGroup" ng-model="selectedAnswer" value="{{answer.text}}" ng-click="setCurrentAnswer(answer)">
</div>
<label class="form-control">
{{answer.text}}
</label>
</div>
</div>
</form>
</div>
<div class="col-xs-12"> </div>
<div class="col-sm-3 col-sm-offset-9 text-center">
<button ng-click="answer(currentAnswer)" class="btn btn-large btn-primary">Select Answer</button>
</div>
</div>
</div>
index.html
<!DOCTYPE html>
<html ng-app="FreemasonTest">
<head>
<title>Are you ready?</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="lib/jquery-ui-1.11.4/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="lib/bootstrap-3.3.6-dist/css/bootstrap.min.css" type="text/css" />
<script type="text/javascript" src="lib/jquery/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="lib/jquery-ui-1.11.4/jquery-ui.min.js" ></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/routes.js"></script>
</head>
<body>
<script type="text/javascript" src="javascript/model/AssessmentModel.js"></script>
<script type="text/javascript" src="javascript/questions.js"></script>
<script type="text/javascript" src="javascript/needs.js"></script>
<script type="text/javascript" src="javascript/controllers/TestController.js"></script>
<script type="text/javascript" src="javascript/controllers/ResultsController.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Libertas-Security Lodge #466</a>
</div>
</div>
</nav>
<div ng-view></div>
</body>
</html>
#KieranDotCo provided the direction I needed. The solution to this problem comes in two parts:
How do I trouble shoot?
What is wrong?
== Troubleshooting ==
The instructions found at developers.google.com/web/tools/chrome-devtools/debug/… provided everything I needed to find and track down the solution.
== Making the App Work ==
The problem was not with Angular.js. Neither was it technically with Bootstrap, but the Bootstrap CSS was causing the problem.
I let the default column definition define the button div for the XS screen dimensions. In the Chrome debugger (image below), we will see that the <div> that contained the <button> element to select an answer, had dimensions that placed it above my radio buttons. This means that every time I tried to click a radio button, the blank space surrounding the "Select Answer" button was grabbing my event and bubbling it around the radio buttons to the body element that lay behind them.
In the above image, we see that when we select the <div> element which should cover the button and only the button that we have a highlighted area that expands in front of the radio buttons.
The answer to the problem lay in changing the class of this div to specify behavior for XS screens. After I add "col-xs-12" to the button div, the div no longer sits in front of the radio buttons and I can select options as I need to.
In the above image, we highlight the <div> as before, but now we see that the div is not bigger than the line that holds the <button>. The "col-xs-12" class 'fixed' the <div> dimensions and thus the app.
== Thank You ==
Big thank you to #KieranDotCo for teaching me about this great feature of Google Chrome's desktop application. You have opened a whole new world of debugging for me!
Im doing an ionic hybrid app an i have a problem with the modal
when i invoke the modal.show() method i see the blackdropdown but not the actual modal content (i copy pasted the example from the docs).
inspecting the modal object in chrome i see its well instanciated.
I think its related to my project setting so ill copy them here
index.html (placeholder)
<body ng-app="myApp">
<ion-pane>
<ion-nav-view animation="slide-left-right"></ion-nav-view>
</ion-pane>
</body>
the page that holds the button to invoke the modal
<ion-view class="backGround-clouds">
<ion-header-bar class="transparent" ng-controller="MenuController" align-title="center" style="margin-top:10px;">
<div class="buttons" style="margin-top:20px;">
<button class="button header-right-decor" ng-click="returnToLastView()"><i class="ion-person" style="font-size:2em;"></i></button>
<h1 class="title" style="height:65px;"><img src="img/new/logo.png"/></h1>
</div>
</ion-header-bar>
<ion-content style="margin-top:75px;">
<div id="errors" class="center" style="color:red;text-align:center;">
<ul>
<li ng-repeat="error in errors">{{error}}</li>
</ul>
</div>
<div class="center login-title">Transactions List</div>
<div class="row">
<div class="col">Date</div>
<div class="col">Transaction</div>
<div class="col">Amount</div>
<div class="col"></div>
</div>
<div class="row" style="margin:0px;" ng-repeat="transaction in transactions">
<div class="col">{{transaction.Date | date:"MM/dd/yy"}}</div>
<div class="col">{{transaction.ProPayID}}</div>
<div class="col">${{transaction.Amount}}</div>
<div class="col"><button class="button-transaction" ng-click="openTransactionDetail(1)">Detail</button></div>
</div>
</ion-content>
</ion-view>
and lastly my simple modal.html
<div class="modal">
<header class="bar bar-header bar-positive">
<h1 class="title">Sample Modal</h1>
</header>
<ion-content has-header="true" padding="true">
<p ng-repeat="data in boulderDataChanges">{{data}}</p>
<button class="button" ng-click="fakeLogin()">Fake Login</button>
</ion-content>
</div>
As mentioned the controller is invoking it correctly but the view just shows black curtain without the modal markup
turns out that the problem was that i have a bootstrap css in my project and it killed the ionic modal css
when i removed this line from my index
<link href="css/bootstrap.min.css" rel="stylesheet">
it worked like a charm
btw reason im using this css is because im using the angular date picker widget
if your index.html file contain
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
remove it.then it will work.
edit
this happens because of .model class in bootstrap.css set eliment on display:none
so you can simply modify bootstrap (just remove models).
http://getbootstrap.com/customize/?id=e025f1d7d08b43d76509f61bb1bf24d0
If you want to keep bootstrap unmodifed just add in this extra css rule to your project and this will fix the black background problem:
.modal-wrapper .modal { display:block; }
How should i implement this:
4 tabs which open onclick and loads a view in to a child.
Tried with 4 ng-view tags and hiding 3 of them but it doesn't feel right. How should I display my content in the right tab?
<section id="tabs">
<div class="tab open">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
<div class="tab">
<div ng-view></div>
</div>
</section>
you should use bootstrap for a tabs and ng-include for a content
something like this
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Le styles -->
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="http://code.angularjs.org/1.2.12/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-cookies.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-route.min.js"></script>
<script src="http://code.angularjs.org/1.2.12/angular-resource.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
</head>
<body>
<div class="container">
<!-------->
<div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">Red</li>
<li>Orange</li>
<li>Yellow</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<div ng-include src="'red.html'"></div>
</div>
<div class="tab-pane" id="orange">
<div ng-include src="'orange.html'"></div>
</div>
<div class="tab-pane" id="yellow">
<div ng-include src="'yellow.html'"></div>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tabs').tab();
});
</script>
</div> <!-- container -->
<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
Angular UI bootstrap module has all the twitter bootstrap components ported as angular modules. You should be using it instead of reinventing it (unless you cannot/dont want to use twitter bootstrap).
tldr: Try using bootstraps tabs component from angular UI bootstrap
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'}">