Comments (6)
I haven't used all the plugins, but I was having the same issue with the dropdown plugin. I downgraded to 1.9.0 since that issue link mentions that version and the dropdown plugin is working fine now.
from preline.
Same happen for me, any hints?
from preline.
I haven't used all the plugins, but I was having the same issue with the dropdown plugin. I downgraded to 1.9.0 since that issue link mentions that version and the dropdown plugin is working fine now.
Thank you @bizarf for your comment. Do you have an HTML code snippet of your working dropdown? I've downgraded to 1.9.0 and using the HTML code above still doesn't work.
from preline.
I haven't used all the plugins, but I was having the same issue with the dropdown plugin. I downgraded to 1.9.0 since that issue link mentions that version and the dropdown plugin is working fine now.
Thank you @bizarf for your comment. Do you have an HTML code snippet of your working dropdown? I've downgraded to 1.9.0 and using the HTML code above still doesn't work.
Sure. This was actually old code that I wrote before 1.9.0, but I updated Preline to the latest version for that project and suddenly found it broken. This is for a React project.
<div className="hs-dropdown relative inline-flex [--placement:left-top]">
<button
id="hs-dropdown-custom-icon-trigger"
type="button"
className="hs-dropdown-toggle transition-all rounded-full hover:dark:bg-slate-700 p-2 hover:bg-slate-300"
aria-label="Dropdown menu"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="w-6 h-6 dark:text-white"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM12.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0zM18.75 12a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
/>
</svg>
</button>
<div
className="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden bg-white shadow-md rounded-lg p-2 mt-2 dark:bg-gray-800 dark:border dark:border-gray-700 min-w-fit"
aria-labelledby="hs-dropdown-custom-icon-trigger"
>
<button
className="hover:dark:bg-slate-700 p-1 hover:bg-slate-300 gap-x-3.5 py-2 px-3 rounded-md text-md text-gray-800 focus:ring-2 focus:ring-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-gray-300 flex w-full items-center"
aria-label="edit post"
onClick={openEditPost}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 dark:text-white"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
/>
</svg>
<span> Edit</span>
</button>
<button
className="hover:dark:bg-slate-700 p-1 hover:bg-slate-300 gap-x-3.5 py-2 px-3 rounded-md text-md text-gray-800 focus:ring-2 focus:ring-blue-500 dark:text-white dark:hover:bg-gray-700 dark:hover:text-gray-300 flex w-full items-center"
aria-label="delete post"
onClick={openDeleteModal}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6 dark:text-white"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
/>
</svg>
<span> Delete</span>
</button>
</div>
</div>
Edit: I just tested the sample code you tried and it's working for me. I'm guessing the plugin hasn't been loaded?
from preline.
@bizarf thank you for testing my sample code and letting me know that worked. So this got me thinking "I'm missing something" and it turns out... I was using 2.X.X... when I updated tailwind to the most recent one(3.4.1), all plugins started to work.
So thank you =)
from preline.
I'm still running into this issue with the Tooltip plugin. When I downgrade to 1.9.0 it starts working. Using that as my solution for the time being.
from preline.
Related Issues (20)
- Documentation needs improvements regarding JS options & methods , with some options not working or lacking information!
- Steps on number input HOT 1
- collapse component not working on chrome, works in Firefox HOT 1
- Scrolling bug in the Scrollspy plugin in Chrome HOT 1
- Advanced Select Not displayed as expected in Nextjs HOT 1
- Vertically centered modals don't work HOT 3
- layout shift due to removal of scroll bar in browser HOT 2
- Second level dropdown does not work in firefox but does work in chrome HOT 1
- Search Issue with Non-Latin Characters in Select Plugin HOT 1
- Preline doesn't work with Solid.js and solid-start HOT 1
- Functions not working in React-Inertia project HOT 2
- javascript plugin not working HOT 1
- Preline Javascript plugin not working HOT 3
- Cannot dismiss opened Advanced Select controls while using FireFox HOT 3
- Unable to use Preline Examples in Remix App HOT 2
- Add option and select option HOT 1
- Conflict using Splide JS with Preline Tabs HOT 1
- Dropdown Stop Working with Livewire V3 Pagination In next page HOT 1
- HSAdvanced Select Disabled option doesn't work in tags mode.
- This installation guide is not working on App.jsx
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preline.