Geek asks and answers

Zurb Foundation 5 - Responsive Tables and Dropdown Buttons

When you try to use the drop-down or drop-down button in a TD cell with zurb-based response tables, the following occurs:

HTML in the browser (works as expected) IPAD (works as expected) IPhone (drop-down list is hidden inside the TD element and is not clickable)

the 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 am trying to put the default show / edit / destroy actions, usually associated with common rail tables, in the drop-down menu.

+3
source share
2 answers

, - , , iPads ( ).

, :

, ipad.

<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>


<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>

href= '#' .

+1

, CSS. , , CSS td, z- .

z-, , CSS, z-index.

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

0

More articles:


All Articles