the last item from the modal menu is not displayed at the bottom of the page

Question

I have a table with data on every row, at the beginning of each row I have a button which contains a modal with the following options:

create

read

update

delete

This modal is displaying every item correct except for the last line on the page, here it collides with the footer or other div, only create, read, update are displayed. How can I display the delete as well?

<td class="fr-pl-0 tg-td--btn-icones" 
   th:if="${...}">
   <button class="tg-btn__menu  fr-btn fr-btn--icon-left" type="button">
      <ul class="tg-menu__list tg--hidden">
         <li th:if="${..}"><a title="Create" class="create" href="#" th:data-id="${section.id}">Create</a></li>
         <li th:if="${...}"><a title="Read" class="read" href="#" th:data-id="${section.id}">Read</a></li>
         <li th:if="${...}"><a title="Update" class="update" href="#" th:data-id="${section.id}">Update</a></li>
         <li th:if="${...}"><a title="Delete" class="fdelete" href="#" th:data-id="${section.id}">Del</a></li>
      </ul>
   </button>
</td>

All the items are displayed in the upper part of the table, only the last item is not displayed in the lower part. (Delete) P.S: It is a just a snippet of code, the code works

Answer 1

Your missing an </a> at the end of the li