themesberg / flowbite Goto Github PK

Suspected error in navbar:

<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">

<button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">

<button data-collapse-toggle="mobile-menu-3" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-3" aria-expanded="false">

<button data-collapse-toggle="mobile-menu-4" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-4" aria-expanded="false">

Is the class name "hover:bg-gray-100focus:outline-none" missing a blank space in the middle?

Is your feature request related to a problem? Please describe.

I am using Flowbite with Svelte. When I click a link in an alert take me to another page. When I click the browser button to go back to a page, the close button on the alert doesn't work. I need to refresh the page to close it.

Describe the solution you'd like

The modal has the toggleModal function to toggle. If the alert has closeAlert function, the button can run the event handler to fire the closeAlert.

The js part of this library doesn't work with nuxt framework (Vuejs). I tried to include the import both in my AppBar.vue and in the main.js app but it doesn't work. I followed all the steps to download and include the library i my project, but while css part has been working, the js part doesn't and DOESN'T RETURN ANY ERROR IN CONSOLE
My repo: https://github.com/salvatorecalo/salvatorecalo.github.io/tree/FlowBiteIssues

Based on many requests from users the Flowbite JS event listeners are not being registered when using a project like React or Vue.

Hi.
React or vue are need a flowbite components and i think you can create component for svelte js and this is good idea .

Hi,

I have installed the datepicker from then CDN and it works just fine. I can change the format with datepicker-format="dd/mm/yyyy". I try now to change the locale with datepicker-locale="fr-FR" and/or datepicker-language="fr". But the locale is still "en". Did I miss something ?

Thanks.

Forgive my drive by issue filing but I noticed that mini-svg-data-uri is a dependency (in plugin.js).
It seems that you're just using it for background images. Couldn't this be done at compile time?

After Tailwind CSS hits v3.0 we should also release a version supporting it https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.2

I thought the Flowbite comes with Tailwind CSS.
But when I try to use basis-1/4, it doesn't work.

I'm wondering if I need to load Tailwind CSS as well.

Is your feature request related to a problem? Please describe.
the methods that are described in the default quickstart guide doesn't seem to work for nuxt.js v2.15. please elaborate it.

Describe the solution you'd like
a proper guide on how to integrate with some document /video on how to integrate with different frontend frameworks. (in my case vue js applications)

Hello.
i find a bug in Toast position
it not show true in demo .

Describe the bug
I have a basic TypeScript Vue 3 Script Setup + TailwindCSS app with login form and a home page that creates and load posts. It was working like a charm before installing Flowbite.

To Reproduce
Steps to reproduce the behavior:

1. Installed Flowbite
2. Added the plugin in the tailwind.config.js
3. Imported in the main.ts
4. See error

Expected behavior
Wanted to use the Tooltip component to try Flowbite for first time.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11 Home 64bit latest
• Browser: Chrome latest
• Editor: VSCode latest
• npm packages versions:

Smartphone (please complete the following information):

Additional context
Uninstalling Flowbite fixes the errors.

Sorry if this is not the correct place to add a feature request.

Looking at the documentation, it's really hard to see which of the classes are part of the base component (they're the same in all variations) and which are specific to that variation. Take a look here: https://flowbite.com/docs/components/buttons/.

I'd like to propose that all classes that are part of the base component comes either first or last, making it much easier to understand what are the different classes.

We already have the styles for a dark mode so we're thinking about building a switcher and implement a dark mode using the dark mode functionality from Tailwind CSS.

We'll build the accordion based on this design.

Hello to Flowbite team

Some sites are right to left.
But Flowbite may not work properly on these sites !!!!

Do you have a plan to add right-to-left support?
Can I help you add this feature?

Describe the bug

I'm trying to install Flowbite on SvelteKit.
When I run npm run dev, I get an error:

document is not defined
ReferenceError: document is not defined
    at Object.745 (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:17:1)
    at __webpack_require__ (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:138:41)
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:151:16
    at /Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2245:3
    at Object.<anonymous> (/Users/shinichiokada/Svelte/flowbite/node_modules/@themesberg/flowbite/dist/flowbite.bundle.js:2247:12)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:190:29)

To Reproduce

Install SvelteKit:

npm init svelte@next flowbite

Install Tailwind Css and Flowbite:

cd flowbite
npm install
npx svelte-add@latest tailwindcss
npm i @themesberg/flowbite

Update the TailwindCSS config.

In the tailwind.config.cjs file:

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/@themesberg/flowbite/**/*.js"
  ],

  theme: {
    extend: {},
  },

  plugins: [
     require('@themesberg/flowbite/plugin')
  ],
};

module.exports = config;

Adding flowbite to routes/__layout.svelte:

<script>
  import "../app.css";
  import "@themesberg/flowbite";
</script>

<slot />

Expected behavior

No error.

Screenshots

Desktop (please complete the following information):

• OS: macOS v12.1
• Browser chrome, brave

Hello,

I cant figure out how I can pass option to the datepicker, using javascript.

I tried

new Datepicker(datepickerEl, {
    autohide: true,
    format: 'mm/dd/yyyy',
});

But it does not work. My Datepicker is displayed and works but I cannot change any option using JS declaration.
What did I miss ?

Hey there,
I am using a fresh project with tailwind2, flowbite 1.1.1 and vue3. The backend stack ist laravel 8 (php8) with inertia.js.
If I'm creating a modal inside a Vue component, then I can't open/toggle the model (data-modal-toggle="default-modal" is set to the button) .
It only works, if i move the button and modal out of the component, into the final html generated site (with Blade Template Engin).
It affects not only the modal, but also the alert dismiss button and basically everything that need flowbite javascript.

Has someone the same issue and know a workaround?

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Interactive tabs'
2. Click on Default active tab two times
3. Tab content will disappear and you have to click another and back.

Expected behavior
Content still will be shown

Screenshots
X

Desktop (please complete the following information):

• OS: Windows 11
• Browser Chrome
• Version 97.0.4692.71

Is your feature request related to a problem? Please describe.
As a .NET developer, I would love to use this library in my Blazor project

Describe the solution you'd like
A Nuget package, similar to NPM for React and Vue.

Hi,

When selecting a date picker for the first time, it shows up correctly as you would expect like so;

However, after re-selecting it (solely just clicking another date) it turns into weird random rounded date entries

.

We'll build the component based on this design.

Has anyone tried using flowbite with remix? I'd love to see an example getting the custom js file to load.

I used a couple of buttons on one of my projects recently. The code that I copied includes exterior margins that effect the page layout when used without editing.

I think it would be best if another solution was implemented as to how the elements are displayed on flowbite.com. That way it wouldn't cause unnecessary debugging to potential implementations.

Hello everyone,
I found an error on the "Interactive Tabs" Component,
As soon as the page launches, if you click on the current tab (the tab that is active), the "tab content" just disappear.
This error happens on the documentation page too:
https://flowbite.com/docs/components/tabs/#interactive-tabs
Go to the interactive tabs section, and click on the Dashboard tab

(Sorry if you don't understand something, my english is a little bad)

Describe the bug
I have a fresh installation of Tailwindcss 3 and latest version of Flowbite installed via NPM and using Webpack 5 as my bundler.
Flowbite styles are working perfectly but all JS powered elements aren't working it seems.

To Reproduce
Steps to reproduce the behavior:

1. Check out https://github.com/Dizzzlectic/flowbite-test
2. Install dependencies (npm install)
3. Run the project (npm run)
4. Try to dismiss any of the alerts

Expected behavior
JS elements should be working, but they don't seem to be

Desktop (please complete the following information):

• OS: [e.g. iOS] Windows 11
• Browser [e.g. chrome, safari] Firefox
• Version [e.g. 22] 95.0.2

Additional context
Add any other context about the problem here.

ref: https://flowbite.com/docs/components/dropdowns/#

menu dropdown hover css white text on light mode because you write md:hover:text-white maybe change css to md:hover:text-blue-700

Issue

• We have installed flowbite to our react project by following recommended steps via npm. We added it to tailwind config etc
• The code is just not working properly. The effects (e.g. tooltip) do not show on hover. If we try to import it directly (via import '@themesberg/flowbite'; we get an error document not found.
• Is it correct to inject the script just with <script src="../path/to/@themesberg/flowbite/dist/flowbite.bundle.js"></script>? Is the path/to just a placeholder for another custom local path?
• We are using NextJS. I think the issue could be related to SSR but I am not sure.
  Any pointers?

All interactive elements like Tab, Dropdown and modal seems to stop working when you leave current page and back back to the page on Nuxt.js