Why does radio button not function on mobile?

Question

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">&nbsp;</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>

On mobile it looks like the buttons are disabled - http://imgur.com/PGxyCS4 — KieranDotCo, Apr 07 '16 at 15:30
I can't see a reason for the issue, if you've got android you can debug like so - https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?hl=en — KieranDotCo, Apr 07 '16 at 15:40
The radios were not actually disabled, but you helped me to find the true problem. Thank you! — Jared Clemence, Apr 07 '16 at 16:52
There are answers like this, try see: -https://stackoverflow.com/questions/50927406/angular-6-proxy-not-working-anymore -https://stackoverflow.com/questions/51681813/angular-proxy-config-not-working — rikg93, Aug 20 '18 at 11:28
@RiccardoGangi, I appreciate your input, but the answers that you link were posted 2 years after I found the answer I needed. Please check to see if a question has already been answered before posting additional help. ;) Stay awesome. — Jared Clemence, Aug 20 '18 at 20:26
[Sidenote] One can always use a select box / list box to **replace** a radio button set. (in iOS sometimes we call such similar thing as a picker) — Ken Lee, Nov 10 '22 at 23:17

score 4 · Accepted Answer · edited Apr 15 '16 at 06:46

@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!

No problem :) Thank you for posting a detailed answer of how you solved the problem! — KieranDotCo, Apr 08 '16 at 07:31
That was my problem exactly. Thank you very much, Mr. Lister and Jared! — Steve Stilson, Mar 18 '19 at 22:21

Why does radio button not function on mobile?

1 Answers1