CODEWITHSUNDEEP
androidipadtwitter-bootstrap
thiago.lenz
thiago.lenz

Reputation: 409

Twitter Bootstrap dropdown on ipad and android doesn't work even with the hack

I have a problem when I access my software on ipad and android. This is the html that doesn't work on ipad. I can't click on the sub-itens

<div class="btn-group">
    <button class="btn dropdown-toggle" data-toggle="dropdown">Export <span class="caret"></span></button>
    <ul class="dropdown-menu">
        <#if  print?exists>
            <li><a href="javascript:print('${print}');">Print in PDF</a></li>
        </#if>
        <#if  printList?exists>
            <li><a href="javascript:print('${printList}');">Print list in PDF</a></li>
        </#if>
        <li><a href="javascript:exportListAt('${targetList}', 2);">Export to Excel</a></li>
        <li><a href="javascript:exportListAt('${targetList}', 1);">Export to CVS</a></li>
        <li><a href="javascript:exportListAt('${targetList}', 3);">Export to XML</a></li>
    </ul>
</div>

I already hack this html with 

jQuery(document).ready( function (){
            jQuery('.dropdown-toggle')
                .on('touchstart.dropdown', '.dropdown-menu', function (e) { e.stopPropagation(); })
                .on('touchstart.dropdown', '.dropdown-submenu', function (e) { e.preventDefault(); })
    })

This error also occur when I access the bootstrap site on ipad and android.

What can I do ?

Upvotes: 7

Views: 5012

Answers (3)

3Gee
3Gee

Reputation: 1164

See the discussions about this issue here: https://github.com/twbs/bootstrap/issues/9543 Solution: https://github.com/twbs/bootstrap/commit/c0eabdda9fd8e97f44117bd4bd77dd1344039024 It was originally a Bootstrap problem.

Upvotes: 0

Robin van Baalen
Robin van Baalen

Reputation: 3651

Recently, Bootstrap 2.2.2 came out and your issue is one of many that has been fixed.

Therefore, a good solution would be to update your Bootstrap version to the latest available.

See the changelog, or download the latest bootstrap directly

I also wrote a short blog post about this issue.

Upvotes: 3

caarlos0
caarlos0

Reputation: 20643

I believe that you should use a a element instead of a button, like bootstrap docs:

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Action
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <!-- dropdown menu links -->
  </ul>
</div>

About the bug itself, you should take a look at this issue.

Upvotes: 0

Related Questions