CODEWITHSUNDEEP
angularjstwitter-bootstrapmobile
Jared Clemence
Jared Clemence

Reputation: 1065

Why does radio button not function on mobile?

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>

Upvotes: 3

Views: 4441

Answers (1)

Jared Clemence
Jared Clemence

Reputation: 1065

@KieranDotCo provided the direction I needed. The solution to this problem comes in two parts:

  1. How do I trouble shoot?
  2. 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.

enter image description here

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.

enter image description here

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!

Upvotes: 4

Related Questions