Skip to content

Commit 2b96573

Browse files
authored
feat: display dropdown max height option (#1703)
1 parent aa5d210 commit 2b96573

File tree

2 files changed

+3
-2
lines changed

2 files changed

+3
-2
lines changed

docs/decorators/display.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,8 @@ The following example illustrates how to implement a dropdown menu with a list o
101101
- `title` - The text label for the menu item
102102
- `link` (optional) - A URL or path that the item will link to when clicked
103103
- `striped` (optional) - When set to true, adds alternating background colors to list items for better visual separation
104-
- `height` (optional) - Sets a maximum height in pixels, after which the content becomes scrollable
104+
- `height` (optional) - Sets height in pixels for the dropdown menu
105+
- `max_height` (optional) - Sets a maximum height in pixels, after which the content becomes scrollable
105106
- `width` (optional) - Defines the dropdown's width in pixels for precise layout control
106107

107108
The dropdown menu automatically positions itself below the trigger element and includes built-in behavior to close when clicking outside the menu or selecting an item.

src/unfold/templates/unfold/helpers/display_dropdown.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
{{ value.content }}
1919
</div>
2020
{% else %}
21-
<nav class="bg-white border border-base-200 overflow-y-auto overflow-x-hidden flex flex-col py-1 rounded-default shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" data-simplebar x-cloak x-transition x-anchor.bottom-start.offset.4="$refs.rowDropdown{{ dropdown_id }}" x-show="openDropdownId{{ dropdown_id }}"x-on:click.outside="openDropdownId{{ dropdown_id }} = false" {% if value.width or value.height %}style="{% if value.width %}width: {{ value.width }}px;{% endif %}{% if value.height %}height: {{ value.height }}px;{% endif %}"{% endif %}>
21+
<nav class="bg-white border border-base-200 overflow-y-auto overflow-x-hidden flex flex-col py-1 rounded-default shadow-lg text-sm top-7 z-50 w-48 dark:bg-base-800 dark:border-base-700" data-simplebar x-cloak x-transition x-anchor.bottom-start.offset.4="$refs.rowDropdown{{ dropdown_id }}" x-show="openDropdownId{{ dropdown_id }}"x-on:click.outside="openDropdownId{{ dropdown_id }} = false" {% if value.width or value.height %}style="{% if value.width %}width: {{ value.width }}px;{% endif %}{% if value.height %}height: {{ value.height }}px;{% endif %} {% if value.max_height %}max-height: {{ value.max_height }}px;{% endif %}"{% endif %}>
2222
{% for item in value.items %}
2323
<{% if item.link %}a{% else %}span{% endif %} {% if item.link %}href="{{ item.link }}"{% endif %} class="flex items-center gap-2 mx-1 px-3 py-2 max-h-[30px] rounded-default hover:bg-base-100 dark:hover:bg-base-700 dark:hover:text-base-200 {% if value.striped %}{% cycle '' 'bg-base-50 dark:bg-white/[.04]' %}{% endif %}">
2424
<span class="grow truncate">{{ item.title }}</span>

0 commit comments

Comments
 (0)