Alpine component Listbox can't limit listbox:options height #4244
-
|
When there's many list elements (I plan on having ~140) and you limit the x-listbox:options height, it doesn't work - no scrollbar appears within a listbox:options and listbox elements overflow. x-combobox component works well, but I need x-listbox component for my particular use case. I think it's a bug, but if it's not, can someone give me a simple example showing how to make it work? Here's a code example highlighting the problem: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/[email protected]/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
<div x-data="{ value: null }">
<div x-listbox x-model="value" class="relative">
<button x-listbox:button class="flex items-center justify-between gap-2 w-52 bg-white pl-5 pr-3 py-2.5 rounded-md shadow">
<span x-text="value ? value : 'Select framework'" class="truncate"></span>
</button>
<div x-listbox:options class="absolute max-w-xs w-full bg-white max-h-40 border border-gray-400">
<ul>
<template x-for="i in 15" :key="i">
<li x-listbox:option :value="i" x-text="i" class="flex items-center cursor-default justify-between gap-2 w-full px-4 py-2 text-sm"></li>
</template>
</ul>
</div>
</div>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Did you try adding |
Beta Was this translation helpful? Give feedback.
-
Thank you, it works. |
Beta Was this translation helpful? Give feedback.
Did you try adding
overflow-y-scroll?