Having trouble with using a dropdown or split drop-down button in a TD cell within Zurb Foundation responsive tables:
Tested on different devices:
- HTML on browser (works as expected)
- iPad (works as expected)
- iPhone (dropdown hides within TD element and is not clickable)
Here is the code snippet causing the issue:
<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>
View the responsive table format Crafty Responsive Tables Playground
Any ideas for resolving this issue?
Looking to integrate default actions (show/edit/delete) typically found in Rails tables into a dropdown button.