fix: action dropdown positioning (#859)

unfoldadmin · Nov 17, 2024 · 0d1516a · 0d1516a
1 parent d8cba95
commit 0d1516a
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/src/unfold/templates/unfold/helpers/actions_row.html b/src/unfold/templates/unfold/helpers/actions_row.html
@@ -8,13 +8,15 @@
                     more_horiz
                 </span>
 
-                <nav x-anchor.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded-md shadow-lg text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openActionsId{{ action_id }}" @click.outside="openActionsId{{ action_id }} = false">
-                    {% for action in actions %}
-                        <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded-md truncate hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
-                            {{ action.title }}
-                        </a>
-                    {% endfor %}
-                </nav>
+                <template x-teleport="body">
+                    <nav x-anchor.bottom-end.offset.4="$refs.rowDropdown{{ action_id }}" class="bg-white border flex flex-col leading-none py-1 rounded-md shadow-lg text-sm top-7 z-50 w-48 dark:bg-gray-800 dark:border-gray-700" x-cloak x-show="openActionsId{{ action_id }}" @click.outside="openActionsId{{ action_id }} = false">
+                        {% for action in actions %}
+                            <a href="{% url action.raw_path instance_pk %}" class="mx-1 px-3 py-2 rounded-md truncate hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-gray-200"{% for attr_name, attr_value in action.attrs.items %} {{ attr_name }}="{{ attr_value }}"{% endfor %}>
+                                {{ action.title }}
+                            </a>
+                        {% endfor %}
+                    </nav>
+                </template>
             </div>
         {% endwith %}
     </td>