CODEWITHSUNDEEP
htmltwitter-bootstrap-3mobile-safari
DTH
DTH

Reputation: 1133

Collapse does not work in Safari Mobile browser

So I've read through some of the other threads but found none which suits my problem. As the header suggests, I cannot collapse my (in this case) panel-body when clicking the + glyphicon. It works fine on other browsers, but on mobile Safari version 9 it does not react.

My code:

<div class="panel panel-primary">
    <div class="panel-heading">
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span> Registrerede brugere 
    <span data-toggle="collapse" href="#collapse1" class="glyphicon glyphicon-plus-sign pull-right" aria-hidden="true" id="notifications_collaps"></span>
    </div>
    <div id="collapse1" class="panel-collapse collapse">
        <div class="panel-body">
             HELLO                
        </div>
        <div class="panel-footer">
        <div class="btn-toolbar">
            <button type="button" class="btn btn-danger pull-right" id="slet_bruger" disabled>
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Deaktivér Bruger
            </button>
            <button type="button" class="btn btn-primary pull-right" id="rediger_bruger" disabled>
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Rediger Bruger
            </button>                 
        </div>
        <div class="clearfix"></div>
        </div>  
    </div>          
</div>

I created a fiddle to demonstrate my problem: Fiddle

Open it in for example chrome and it works ...

Open it in Safari Mobile and it wont react to clicks..

Upvotes: 0

Views: 1536

Answers (1)

pvg
pvg

Reputation: 2729

The fundamental problem here is that your glyphicon span does not receive activation events. There are various nasty tricks to try to get around this like wrapping it with a div with its own event handler or adding cursor:pointer to it. The trouble with them is they are fragile and might interfere with something else. The best solution is to properly call the button a button by putting your span in a button element and styling it to taste. Then it functions correctly on mobile and otherwise, preserves accessibility and requires no magical special-casing. For an extended discussion, see:

https://github.com/twbs/bootstrap/issues/16213

Upvotes: 1

Related Questions