Zurb Foundation 5 - responsive tables and dropdown buttons

Question

When trying to use a drop down or split drop down button inside a TD cell with the zurb foundation responsive tables, the following happens:

HTML on browser (works as expected) IPAD (works as expected) IPhone (the dropdown hides within the TD element and is not clickable)

Code:

  <td class="text-center">
   <a href="#" class="tiny round button split">Actions<span data-dropdown="drop"></span></a><br>
     <ul id="drop" data-dropdown-content class="f-dropdown">
       <li><%= link_to show_image, cancellation %></li>
       <li><%= link_to edit_image, edit_cancellation_path(cancellation) %></li>
       <li><%= link_to delete_image, cancellation, method: :delete, data: { confirm: 'Are you sure?' } %></li>
     </ul>
   </td>

The responsive table format is the one shown here: Crafty Responsive Tables Playground

Any suggestions?

I'm trying to place the default show/edit/destroy actions normally associated with common rails tables in a dropdown button.

Answer 1

This question is a bit old yet still applies as I just ran into this issue with dropdown buttons not working on iPads (any generation).

After some googling I found a solution that worked :

The change discribed here solved the ipad drop down menu problem.

I chaged code from

 <li class='has-dropdown not-click'> <a>Menu dropdown</a> <ul class='dropdown'> <li><a href='aulas.php'>Aulas</a></li> <li><a href='locais.php'>Locais</a></li> </ul> </li> 

to

 <li class='has-dropdown not-click'> <a href='#'>Menu dropdown</a> <ul class='dropdown'> <li><a href='aulas.php'>Aulas</a></li> <li><a href='locais.php'>Locais</a></li> </ul> </li> 

lack of href='#' was the cause in my case.

Answer 2

Sounds like it could be a simple CSS problem. If the dropdown is still working but hiding behind another element, try writing a CSS rule for the td that sets its z-index higher.

If its containing element has a z-index set though, this might not work, so you could try using CSS again to remove any z-index rule.

developer.mozilla.org/en-US/docs/Web/CSS/z-index