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!
Related
I want to build a menu with a dropdown selection, using Semantic UI.
It works great on desktop, because it seems to be predicated on hovering.
However, on mobile, given there is no hover, I can't get it to drop down.
How do I get it to work based on clicking, not just hovering?
<!DOCTYPE html>
<html>
<head>
<title>Puzzles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=yes">
<link rel="stylesheet" type="text/css" href="CSS.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
</head>
<body>
<div class="ui menu">
<div class="header item">Puzzles</div>
<div class="right menu">
<div class="ui simple dropdown item">
<div class="text">Unsolved Puzzles</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">Puzzle 1</div>
<div class="item">Puzzle 2</div>
<div class="item">Puzzle 3</div>
</div>
</div>
</div>
</div>
</body>
</html>
You need to initialize the dropdown with $('.ui.dropdown').dropdown();
fiddle: https://jsfiddle.net/L63u25ja/
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
I am using angular JS with angular-route and ui bootstrap to build a form with dropdownlist.
My problem is thaht when I put the ui-bootstrap dropdownlist component inside an ng-view, the component is not working as supposed, whereas when I put it outside of the ng-view it is working correctly.
For me it comes from the fact that the data binding is not working well but I didn't manage to find why.
Code is more explicit than words : see here on plnkr
<html>
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-route#*" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.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" />
<script data-require="bootstrap#3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body ng-app="routeApp">
<h1>Hello Plunker!</h1>
<nav>
Page d'accueil
Page de contact
</nav>
<div ng-view></div>
<div ng-controller='DropdownCtrl'>
<div class="btn-group" uib-dropdown is-open="status.isopen">
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle ng-disabled="disabled">
{{button}} <span class="caret"></span>
</button>
<ul class="uib-dropdown-menu" role="menu" aria-labelledby="single-button">
<li role="menuitem">
{{action}}
</li>
</ul>
</div>
</div>
</body>
</html>
You will see that the Button dropdown is working well outside of the ng-view but will not work any more inside the ng-view.
Thanx in advance
The problem is you are using href=# on the links. Remove the # and it works fine.
Since angular routing is using hash based routes the # is causing a route change attempt
DEMO
I'm trying to use Angular JS with Laravel 4.2. I've changed the blade's default {{}} into [[]], it works perfectly, now the problem is that when I puts Angular JS code in main layout (view) it works but when I put Angular JS code in a child view(actually child view extends the main layout and section is yielded using #section('contents') ...Angular JS code... #stop) it doesn't work at all, browser can't render the Angular JS exprerssion and shows it as it is in code editor! Here is my "main layout.blade.php" and "child.blade.php":
"main.layout.blade.php"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
[[ HTML::style('css/bootstrap.min.css') ]]
[[ HTML::style('css/custom.css') ]]
[[--angular js files--]]
[[HTML::script('/js/angular/angular.min.js')]]
[[HTML::script('/js/controllers.js')]]
[[--jquery bootsrtap js files--]]
[[ HTML::script('js/respond.js') ]]
[[ HTML::script('js/jquery-1.11.2.min.js') ]]
[[ HTML::script('js/bootstrap.min.js') ]]
</head>
<body>
#include('layouts.main-menu')
<div class="container" id="container">
<div ng-app=""><!-- This Angular JS works fine -->
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
#yield('content')
</div>
#include('layouts.footer')
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
Child.blade.php
#extends('layouts.main')
<!doctype html ng-app="myApp">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
#section('content')
<div ng-app=""><!-- This Angular JS doesn't work fine -->
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
#stop
</body>
</html>
You can see clearly that same Angular Code snippet is used in both files but in "layout.main.blade.php" it works and in "child.blade.php" it doesn't work as it is in between #section('content') ... #stop I can't get understand why this is and how to solve it!!!!!!
This is the response from network panel:
GET localhost:8000
200 OK
localhost:8000
3.4 KB
[::1]:8000
141ms
HeadersResponseHTMLCacheCookies
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Management</title>
<!-- Bootstrap -->
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/bootstrap.min
.css">
<link media="all" type="text/css" rel="stylesheet" href="http://localhost:8000/css/custom.css">
<script src="http://localhost:8000/js/angular/angular.min.js"></script>
<script src="http://localhost:8000/js/controllers.js"></script>
<script src="http://localhost:8000/js/respond.js"></script>
<script src="http://localhost:8000/js/jquery-1.11.2.min.js"></script>
<script src="http://localhost:8000/js/bootstrap.min.js"></script>
</head>
<body>
<div class="row">
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#collapse"
>
<span class="sr-only">Toggle navigation</span>
<span class="glyphicon glyphicon-arrow-down"></span>
MENU
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="/" ><span class="glyphicon
glyphicon-home"></span> Home</a></li>
<!--<li class="dropdown"><a href="#" data-toggle="dropdown">Dropdown
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Dr. Winthrop</li>
<li>Dr. Chase</li>
<li>Dr. Sanders</li>
</ul>
</li>-->
<li><span class="glyphicon glyphicon-edit"></span> Make CV</li
>
<li><span class="glyphicon glyphicon-eye-open"></span> Example</li>
<li><span class="glyphicon glyphicon-info-sign"></span> About</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Sign in</li
>
<li>Sign Up</li>
</ul>
</div>
</nav>
</div>
<div class="container" id="container">
<div ng-app="">
<p>Name : <input type="text" ng-model="name"></p>
<h1>Hello {{name}}</h1>
</div>
<div ng-app="">
<p>Name : <input type="text" ng-model="name1"></p>
<h1>Hello {{name1}} </h1>
</div>
</div>
<footer class="footer row ">
<div class="col-lg-4 col-sm-4 col-md-4" id="links">
<h4>Links</h4>
<ul class="list-unstyled">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
</footer>
<script>
$("nav ul li").on("click", function() {
$("nav ul li").removeClass("active");
$(this).addClass("active");
});
</script>
</body>
</html>
1 request
3.4 KB
141ms (onload: 1.06s)
I'm not a blade user so I can't tell you exactly how to fix this. I do use PHP but I use Eloquent (the ORM part of Laravel) and use Slim for doing the server side routing. I believe it's best to write your HTML simply as HTML, use $http (basically the same as $.ajax) to get your data into the client code but write them as totally separate code bases. This will afford you a lot more flexibility and greatly simplify the task of debugging since you aren't trying to figure out issues between the server and client simultaneously. You can test the server in isolation using curl or POSTMan and then can separately build/test the client using mock objects or real requests to your server side component.
On the client side of things what you show being output has quite a few problems though, multiple html tags (should be 1 for the document) multiple ng-app (same, 1 for the page typically on the html or body tag).
For bootstrap use ui-bootstrap, you need the regular bootstrap.css file and the ui-bootstrap-tpls.js file but not bootstrap.js.
Where you have the jQuery to bind to a click event on some elements you should be using an ng-click directive in the markup instead, also can use ng-class to conditionally add/remove a class to an element based on the state of a model.
It seems like you have an understanding of roughly how to use all these things but you need to clearly separate things and stop using jQuery for a while to get used to how to do things with Angular properly. If you try to use jQuery outside of directives or tests with Angular you're typically doing something wrong. For details see "Thinking in AngularJS" if I have a jQuery background?
I have used the following code in my workspace project as a part of a large application and ir worked fine. I am trying to isolate the page into a stand alone and cannot seem to get the dialog pop up. Shown below is the code, can someone please comment on why it won't pop up the modal dialog ? Thanks in advance and I appreciate your time.
<!doctype html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js">
</script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="firstCtrl">
<div class="modal-header">
<button type="button" class="btn btn-primary"
data-toggle="modal" data-
target="#selectOptionTestDialog">Options</button>
</div>
<div class="modal fade" id="selectOptionTestDialog" tabindex="-1" role="dialog"
aria-labelledby="myCaseLabel"
aria-hidden="true" >
<div class="modal-dialog">
<div class="modal-content">
<form name="formShowOptions" role="form">
<div class="modal-header">
<p>Execution Steps</p>
</div>
<div class="modal-body">
Select Execution Step :
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
Include JQuery and Bootstrap js files
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>