1

I have an ASP.Net web application.

My problem is that hyperlinks are not clickable / pressable on touchscreen devices. I have tried android phones and iPads.

This problem surfaced AFTER I introduced HTML to display modal windows using Bootstrap.

When I remove the code for the modal windows and buttons, the problem goes away and the links can be clicked/pressed successfully.

I reference the following scripts and stylesheets :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>

<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css"
    rel="stylesheet" type="text/css" />

<link href="../../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="../../assets/plugins/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" />

I then have links to allow the user to click/press a link ( tab ):

 <div class="row-fluid profile">
                <div class="span12">
                    <!--BEGIN TABS-->
                    <div class="tabbable tabbable-custom tabbable-full-width" id="tabs">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_1_1" data-toggle="tab">Profile Info</a></li>
                            <li class=""><a href="#tab_1_2" data-toggle="tab">Pay Invoice</a></li>
                            <li class=""><a href="#tab_1_3" data-toggle="tab">Top Up Smart Card</a></li>
                        </ul>


<!-- Modal Window to display terms and conditions -->
<div class="modal fade" hidden="hidden" id="termsConditionsModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title" id="myModalLabel">
                    Terms and Conditions</h3>
            </div>
            <div class="modal-body">
                <h4>
                    Terms of website use</h4>
                Please read these terms of use carefully before you start to use the site. By uing
                our site, you indicate that you accept these terms of use and that you agree to
                abide by them. If you do not agree to these terms of use, please refrain from using
                our site.
                <h4> ... Rest of content here and closing tags etc.....
           </h4> </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">
                    Ok</button>
            </div>
        </div>
    </div>

Opening the website on a desktop or laptop is fine. I can use my mouse to click the tabs/links without a problem.

However, if I view the website on an android phone, iPad or iPhone then the tabs/links are not clickable / pressable.

When i remove the code for the modal window, the website works fine on touch devices and the links can be pressed fine.

I noticed something else too which might help in solving this. When i first open the website on my phone or touch device, the links cannot be pressed as described... however, If i open the modal window first then close it, the links can then be pressed fine. No idea why this is.

Many thanks for your time.

Kev
  • 743
  • 2
  • 14
  • 32
  • If you are using Bootstrap 3 you don't need bootstrap-responsive.css anymore. Because it is inside default bootstrap.css. And min version of jquery needed is >1.9.0 http://stackoverflow.com/questions/18891829/twitter-bootstrap-3-jquery-minimum-version – Asim K T Sep 15 '15 at 11:00
  • Using older version , v2.3.1. I will get version 3 and 1.9.0 jquery and try that version combination. Thanks – Kev Sep 15 '15 at 13:11
  • Unforunately the latest version of bootstrap and jquery 1.9.0 is causing issues with my site which is obviously down to breaking changes and updates to the versions. If a solution was available for v2.3.1 it would be appreciated. ( However I understand that this version is no longer supported ) thanks – Kev Sep 15 '15 at 14:38
  • 1
    I searched a bit and looks like there are issues with bootstrap 2.3 in touchscreens. If you are targeting mobile screens you should use 3. It's not that hard to migrate. http://getbootstrap.com/migration/. Meanwhile I will try to solve the problem. Can you provide a jsfiddle? – Asim K T Sep 16 '15 at 05:03

0 Answers0