CODEWITHSUNDEEP
javascriptcssruby-on-railstwitter-bootstrap
Linus
Linus

Reputation: 4783

Twitter Bootstrap for Rails dropdown-menu is unclickable

I suddendly had a weird issue with my until now working bootstrap dropdown-menu on tablets and smartphones. The collapsed (on small screens) submenus aren't clickable. Its like the ul with the class dropdown-menu is like a "block", blocking the li elements inside of it and making them unclickable. I'm not able to select them when I "long-click" the li elements on a small device. When I "fast-click" them, it's like the area covered by the ul element is flashing in grey for a millisecond, showing the area being covered.

I'm not sure what could cause this. The menu works without any problems on a laptop, even if I resize the browser window until the menu collapses, I can still hover over the li elements so they get their "hover effect".

Here is the skeleton of my page until the first li element of the menu, maybe I accidentally broke something here? As far as I understand the javascript should be fine, otherwise the menu wouldn't open at all, right?

    <!-- MENU -->
    <div class="row">
      <div class="navbar span10 offset1">
        <div class="navbar-inner">
          <div class="container">
            <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </a>
            <div class="nav-collapse collapse">
              <ul class="nav">
                <%= nav_link("Home", home_path) %>

                <li class="dropdown <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a>
                  <ul class="dropdown-menu">  <-- blocking element?
                    <li><%= link_to "Overview", courses_path %></li>

I couldn't find any fix here or at google so I hope someone knows this issue and how to fix it. Thank you very much!

Update: I've noticed that if I click on a menu item containing submenu-items, the whole menu gets unclickable. This means even the menu items which were clickable before can't be clicked anymore.

Is there maybe something suddenly covering the whole area?

Update 2 Thank you for your answers but I've noticed something that points the problem into an new direction. As I'm using the twitter bootstrap framework, I'm using, among other things, the dropdown menu and the picture slider. I've noticed that the picture slider isn't moving anymore. Could this be related to the first problem? I looked at my git commit logs and I saw that there was a change of the bootstrap-alert.js (v2.3.1 -> v2.3.2) and jQuery JavaScript Library (v.1.9.1 -> v1.10.2) versions. I don't get why the dropdown functionality is still alive but not the slider. Could this have something to do with this?

Update 3 It turns out that if I replace the application.js file inside the public/assets folder (replacing jQuery JavaScript Library v1.10.2 with jQuery JavaScript Library v1.9.1), everything works again. But the problem now is that when I precompile the assets, it replaces the v1.9.1 with v1.10.2 again.

Where is the version 1.10.2 defined? I think this could help a lot of people having the same issue.

Upvotes: 1

Views: 1080

Answers (2)

Kooki3
Kooki3

Reputation: 609

In your bootstrap.js. file(or min), find the substring

"ontouchstart"

and replace it with

"disable-ontouchstart"

Upvotes: 1

trh
trh

Reputation: 7339

What you're looking for is a sub menu.

dropdown is the element for a block, essentially. dropdown-menu is the element for a ul, and dropdown-submenu is the element for an li to create a sub menu inside a dropdown menu.

So change the li's class from dropdown to dropdown-submenu. This will call the javascript component for dropdown's to render the right behavior.

        <div class="nav-collapse collapse">
          <ul class="nav">
            <%= nav_link("Home", home_path) %>

            <li class="dropdown-submenu <%= "active" if params[:controller] == "courses" || params[:controller] == "enrolments" %>">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Courses <b class="caret"></b></a>
              <ul class="dropdown-menu">  <-- blocking element?
                <li><%= link_to "Overview", courses_path %></li>

You'll have to style the element, by default it uses the standard blue highlight. Check the section on submenus for more info: http://getbootstrap.com/2.3.2/components.html#dropdowns

Upvotes: 1

Related Questions