Using DaisyUI with CSS Anchor Positioning Polyfill #4224
Replies: 1 comment 3 replies
-
|
You can do something like this: |
Beta Was this translation helpful? Give feedback.
-
|
I'm trying to implement this solution using datastar right now, so there will be discrepancies among our implementations: But here is my code when there's no results fetched from the server using AJAX: <div class="combobox dropdown input w-96 m-8" data-signals:dropdown-open__case.kebab="false" data-class:dropdown-open="$dropdown-open == true">
<input aria-autocomplete="list" aria-activedescendant="" placeholder="Search..." type="text" data-on:input__debounce.100ms="@get('/word/search?word=' + $search)" role="combobox" autocomplete="off" data-on:focus="$dropdown-open = true" tabindex="0" data-bind="search" aria-expanded="false" data-on:keydown=" $highlighted = evt.key === 'ArrowUp' ? $highlighted - 1 % $result-count : evt.key === 'ArrowDown' ? Math.min($highlighted + 1, $result-count) : $highlighted
" data-on:blur="$dropdown-open = false">
<ul role="listbox" data-signals:highlighted__case.kebab="0" data-signals:result-count__case.kebab="0" class="dropdown-content menu flex-nowrap p-2 shadow bg-base-100 rounded-box w-full max-h-60 overflow-y-auto mt-1 -ml-3" id="combobox-ul" tabindex="-1">
<li class="menu-disabled">
<span>No results found</span></li></ul>
</div>One of the problems I'm having here is with the dropdown actually covering the |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
|
I'm currently on vacation at the moment, will get you that example when I get back. Edit: I narrowed down the problem. It looks like for some reason Tailwind isn't picking up certain styles in my source code, which is bizarre because it's picking up others. When I replaced my generated output.css with the CDN link everything worked |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
This may be a question for the folks over at Tailwind, but I'm currently working on a project using daisy, and I'm trying to create a an Search+Autocomplete component. My plan for the javascript side of autocomplete component is to use datastar's to fetch the results from the server via AJAX.
Currently what I'm thinking of doing is using an input + dropdown to get the desired effect, which led me to this. Because I'm trying to put the autocomplete results next to the input component, I figured I'd try method 2, which involves using a polyfill on FIrefox-based browsers as listed on the documentation.
It looks like from some initial testing there seems to be an incompatibility with the output css generated by tailwind and the anchor positioning polyfill.
Here's my basic HTML:
Here's my output.css.
(Edited: Forgot to add the errors)
Was wondering what the best practice is for implementing a search bar + autocomplete and what components to use for that purpose? Thanks everyone!
Beta Was this translation helpful? Give feedback.
All reactions