Flowbite with Turbo on rails7 #88

filser89 · 2022-02-09T14:44:13Z

Hi! 👋

Firstly, thanks for your work on this project! 🙂

I got Flowbite working together with Turbo in my Rails 7 project. The original issue was that the javascript worked until the first turbo navigation was made and stoped working after that.

According to Turbo's documentaction this happened because Flowbite uses DOMContentLoaded event to install JS behavior, but this event only fires once, in response to the initial page load.
In order to install the JS behavior on every page change I replaced DOMContentLoaded to turbo:load event in dist/flowbite.js. turbo:load event fires on every page change.

I used patch-package to patch flowbite@1.3.3 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/flowbite/dist/flowbite.js b/node_modules/flowbite/dist/flowbite.js
index 92e66fc..3659e36 100644
--- a/node_modules/flowbite/dist/flowbite.js
+++ b/node_modules/flowbite/dist/flowbite.js
@@ -32,7 +32,7 @@ const rotateAccordionIcon = accordionHeaderEl => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-accordion]').forEach(function (accordionEl) {
     const accordionId = accordionEl.getAttribute('id');
     const collapseAccordion = accordionEl.getAttribute('data-accordion');
@@ -109,7 +109,7 @@ const toggleCollapse = (elementId, show = true) => {
   }
 };
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle target elements using [data-collapse-toggle]
   document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
     var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
@@ -150,7 +150,7 @@ const toggleModal = (modalId, show = true) => {
 };
 
 window.toggleModal = toggleModal;
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
     var modalId = modalToggleEl.getAttribute('data-modal-toggle');
     var modalEl = document.getElementById(modalId);
@@ -172,7 +172,7 @@ document.addEventListener('DOMContentLoaded', () => {
 /***/ 454:
 /***/ (() => {
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   document.querySelectorAll('[data-tabs-toggle]').forEach(function (tabsToggleEl) {
     const tabsToggleElementsId = tabsToggleEl.getAttribute('id');
     const tabsToggleElements = document.querySelectorAll('#' + tabsToggleElementsId + ' [role="tab"]');
@@ -2208,7 +2208,7 @@ var popper_createPopper = /*#__PURE__*/popperGenerator({
 
 ;// CONCATENATED MODULE: ./src/components/dropdown.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
     const dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
@@ -2256,7 +2256,7 @@ var tabs = __webpack_require__(454);
 var modal = __webpack_require__(508);
 ;// CONCATENATED MODULE: ./src/components/tooltip.js
 
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('turbo:load', () => {
   // Toggle dropdown elements using [data-dropdown-toggle]
   document.querySelectorAll('[data-tooltip-target]').forEach(function (tooltipToggleEl) {
     const tooltipEl = document.getElementById(tooltipToggleEl.getAttribute('data-tooltip-target'));

This issue body was partially generated by patch-package.

The text was updated successfully, but these errors were encountered:

seanbjornsson · 2022-02-23T22:09:22Z

Thanks for posting this. I tested your solution on a local version of flowbite.js and it indeed fixed the problem I was having with the js not working.
(also on Rails 7)

codenashwan · 2022-03-23T16:52:53Z

thanks :)

kkurcz · 2022-03-30T09:01:30Z

works like a charm 👍

skipmaple · 2022-04-08T02:40:47Z

Worked for me on rails7 project, thanks :)

In order to make Flowbite work with Turbo, we have to patch it to listen for `turbo:load` rather than `DOMContentLoaded`.[^1] This commit adds the patch-package Node package and its `postinstall` Yarn script, along with a patchfile specific to Flowbite 1.4.3. Developer instructions for why we’re doing this and how to update the patchfile in the future have also been added to `DEVELOPMENT.md`. #182 [^1]: themesberg/flowbite#88

spacerobotTR · 2022-05-28T12:24:19Z

Wow thanks for posting this. Was just hooking up flowbite with rails 7 and hit this issue. Glad I stumbled on this. Fixed my issues.

…ite#88 -- git apply flowbite.patch)

puglet5 · 2022-06-28T00:00:55Z

Also works with Turbolinks (5.2.0) with turbolinks:load. Thanks!

blump · 2022-07-05T22:34:21Z

For those using Webpack, a solution that works is to replace DOMContentLoaded by turbo:load in the ./node_modules/flowbite/dist/flowbite.js file

const replace = require('replace');
replace({
    regex: "DOMContentLoaded",
    replacement: "turbo:load",
    paths: ['./node_modules/flowbite/dist/flowbite.js'],
    recursive: true,
    silent: true,
});

jsbaltodano · 2022-07-20T00:19:16Z

this is old, but it would be easier if inside your own js, you trigger the DOMContentLoaded event inside the turbo:load event

// import "flowbite";
window.document.addEventListener('turbo:load', (event) => {
    // trigger flowbite events
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
});

mikelieser · 2022-07-20T06:51:43Z

Wouldn't it be even better if flowbite.js would have a .connect() method, that we could use it like this:

// import "flowbite";
window.document.addEventListener('turbo:load', (event) => {
    Flowbite.connect();
});

So no need to hack the flowbite.js and no need to trigger DOMContentLoaded again, as that could lead to other side effets?!

UPDATE: Or as an alternative: Provide an event that reconnects flowbite when triggered. like "document flowbite:reconnect" or something like that.

filser89 · 2022-08-03T10:24:29Z

this is old, but it would be easier if inside your own js, you trigger the DOMContentLoaded event inside the turbo:load event
// import "flowbite";
window.document.addEventListener('turbo:load', (event) => {
    // trigger flowbite events
    window.document.dispatchEvent(new Event("DOMContentLoaded", {
      bubbles: true,
      cancelable: true
    }));
});

Yeah, that's a nice solution, I was considering something similar, but couldn't get it to not fire "DOMContentLoaded" twice on the initial load of the page (when "DOMContentLoaded" and "turbo:load" both fire). Do you know a way to solve this? Will appreciate it!

TsubasaKawajiri · 2022-08-08T06:58:24Z

You can handle with Turbo Events with application.js as below.
For example, You want to use Dismiss.

// this method copy from dismiss.js
function initDismiss() {  
  document.querySelectorAll('[data-dismiss-target]').forEach(triggerEl => {
    const targetEl = document.querySelector(triggerEl.getAttribute('data-dismiss-target'))
    new Dismiss(targetEl, {
      triggerEl
    })
  })
}

document.addEventListener('turbo:load', initDismiss)

flowbite.js can export init method for example, initDismiss, initCollapse etc..?
If so, We can handle Turbo Event at application.js as below.

document.addEventListener('turbo:load', initDismiss)

archonic · 2022-09-01T06:14:07Z

On 1.5.2 I've got the following:

window.document.addEventListener('turbo:load', (_event) => {
  console.log("binding turbo:load to domcontentloaded")
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

window.document.addEventListener('DOMContentLoaded', (event) => {
  console.log("domcontentloaded event");
})

I can see the domcontentloaded event on every page change, so it's working as intended, but flowbite component JS is not working. Is there a different event I should be dispatching?

Update

I had to modify @TsubasaKawajiri's comment but got it working.

function initDismisses() {
  document.querySelectorAll('[data-dismiss-toggle]').forEach(triggerEl => {
    const targetEl = document.getElementById(triggerEl.getAttribute('data-dismiss-toggle'));
    new Dismiss(targetEl, { triggerEl });
  });
}

function initCollapses() {
  document.querySelectorAll('[data-collapse-toggle]').forEach(triggerEl => {
    const targetEl = document.getElementById(triggerEl.getAttribute('data-collapse-toggle'));
    new Collapse(targetEl, { triggerEl });
  })
}

window.document.addEventListener('turbo:load', (_event) => {
  initDismisses();
  initCollapses();
});

It works but it would be awfully nice to have a generic shim instead of copying init lines for every component.

Rodeoclash · 2022-09-15T06:03:01Z

Also getting this with Phoenix LiveView, I assume for the same reasons.

egze · 2022-09-15T15:16:04Z

For LiveView the fix is similar:

window.addEventListener('phx:page-loading-stop', (event) => {
  // trigger flowbite events
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

IndieVar · 2022-10-05T18:24:34Z

Please help me, how to use Flowbite and Turbo Rails 7 with import map?
I use Flowbite v.1.5.3 as here https://flowbite.com/docs/getting-started/rails/
and tailwindcss

I change "DOMContentLoaded" on "turbo:load" in dist/flowbite.js and in vendor/javascript/flowbite.js, but it's not work for me, my scripts work only if reload page

indigodavid · 2022-10-13T04:22:23Z

Please help me, how to use Flowbite and Turbo Rails 7 with import map? I use Flowbite v.1.5.3 as here https://flowbite.com/docs/getting-started/rails/ and tailwindcss

I change "DOMContentLoaded" on "turbo:load" in dist/flowbite.js and in vendor/javascript/flowbite.js, but it's not work for me, my scripts work only if reload page

@varProg I was having the same issue, and tried the solutions above with no success. Nevertheless, after checking a lot of similar problems I found something that might be helpful for us using Flowbite with Rails 7 as a temporary solution.

On your application.js add the following lines:

import "flowbite"
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false

According to the turbo.hotwired.dev handbook:

If you want Drive to be opt-in rather than opt-out, then you can set Turbo.session.drive = false; then, data-turbo="true" is used to enable Drive on a per-element basis.

I also tried just setting the interactive element as data-turbo="false", without a positive outcome.

The solution mentioned works for me, but it is by no means a permanent solution, because the Rails application has bigger transition times during the navigation after I did this change. However, it can help more experienced developers to identify a better solution (I have been working with Rails for only one month).

I'll copy the link of that documentation for further reference.
Turbo Handbook

I hope you find this solution useful, in the meantime.

sevos · 2022-11-06T01:40:26Z

Hey, IMHO this change introduced the bug 87a0c75

vladiim · 2022-11-07T02:23:38Z

I ended up using stimulus to set up Flowbite functions. The example below is for a Dropdown element's functionality.

app/views/shared/_nav.html.erb

<div data-controller="dropdown">
  <button data-dropdown-target="trigger">
  <div data-dropdown-target="menu">
    <!--- all the popover html -->
  </div>
</div>

app/javascripts/controllers/dropdown_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["trigger", "menu"]

  connect() {
    this.dropdown = new Dropdown(this.menuTarget, this.triggerTarget)
  }
}

app/javascripts/application.js

import "@hotwired/turbo-rails"
import "flowbite"
import "controllers"

sevos · 2022-11-07T13:29:49Z

This is a really great idea! Thank you @vladiim !

fernandokbs · 2022-12-03T22:12:13Z

@indigodavid Working, not sure thats the correct solution tho. Thanks :D

archonic · 2023-03-21T00:14:39Z

Just adding clarification for others trying to fix this, you'll need the turbo dist file instead of the standard flowbite index file (in addition to upgrading to v1.6.4).

https://flowbite.com/docs/getting-started/rails/#esbuild

alhafoudh · 2023-03-22T21:57:54Z

Good job guys, but this partials sent over cable are still not fixed by this :(

hs-dliaska · 2023-03-23T00:44:46Z

what @alhafoudh said. it still doesn't work with partials. would you be able to provide solution / refund or fix it? tbh only subscribed cause seen here that all issues with turbo were resolved, but the one i had - persists.

archonic · 2023-03-23T01:43:02Z

Personally I think taking on the responsibility of component initialization has to make too many assumptions about the ways developers are manipulating their DOM. If component initialization wasn't attempted by simply including the script, we would be free to initialize in our own ways. With Rails, Stimulus makes the most sense (IMO) because just placing the component HTML on the page also initializes any associated JS.

Is there any way we can opt to not auto-initialize? I noticed this:

// setup events for data attributes
const events = new Events('load', [
    initAccordions,
    initCollapses,
    initCarousels,
    initDismisses,
    initDropdowns,
    initModals,
    initDrawers,
    initTabs,
    initTooltips,
    initPopovers,
    initDials,
]);
events.init();

Is there a way to not include that or would we have to write our own Flowbite index.ts?

I suppose another long term solution would be to init components with MutationObservers, but that's quite a change.

rodrigolj · 2023-03-26T05:50:20Z

I'm getting this in my console:

Uncaught TypeError: Failed to resolve module specifier "flowbite/dist/flowbite.turbo.js". Relative references must start with either "/", "./", or "../".

The top of my application.js only has this:

import "@hotwired/turbo-rails";
import "flowbite";
import "flowbite-datepicker";
import "flowbite/dist/flowbite.turbo.js";
import "controllers";

Are there any instructions missing?

zoltanszogyenyi · 2023-03-27T09:56:33Z

Hey everyone,

Can you please try to initialise the components when using partials on a hook from Ruby on Rails 7 when the DOM has been rendered or re-rendered?

For Nuxt.js this would be the equivalent:

<script setup>
import { onMounted } from 'vue'
import { initFlowbite } from 'flowbite'

// initialize components based on data attribute selectors
onMounted(() => {
    initFlowbite();
})
</script>

<template>
    // Modal HTML markup with data attributes from Flowbite
</template>

Basically, you would only need to call the initFlowbite(); function.

Here's some more info on this: https://flowbite.com/docs/getting-started/quickstart/#init-functions

Cheers,
Zoltan

zoltanszogyenyi · 2023-03-27T09:57:28Z

You can check out an example for this in the latest comment for this issue: #499

import { Controller } from "@hotwired/stimulus";
import { initFlowbite } from "flowbite";

export default class extends Controller {
  initialize() {
    initFlowbite();
  }
}

And then:

<%= turbo_frame_tag id="flash" do %>
  <div data-controller="controller-name">
    <%= render "layouts/flash" %>
  </div>
<% end %>

zoltanszogyenyi · 2023-03-27T09:58:27Z

what @alhafoudh said. it still doesn't work with partials. would you be able to provide solution / refund or fix it? tbh only subscribed cause seen here that all issues with turbo were resolved, but the one i had - persists.

Please check out the solution above by calling one single function to initialise all UI components that require data attributes.

zoltanszogyenyi · 2023-03-27T09:59:41Z

Personally I think taking on the responsibility of component initialization has to make too many assumptions about the ways developers are manipulating their DOM. If component initialization wasn't attempted by simply including the script, we would be free to initialize in our own ways. With Rails, Stimulus makes the most sense (IMO) because just placing the component HTML on the page also initializes any associated JS.

Is there any way we can opt to not auto-initialize? I noticed this:
// setup events for data attributes
const events = new Events('load', [
    initAccordions,
    initCollapses,
    initCarousels,
    initDismisses,
    initDropdowns,
    initModals,
    initDrawers,
    initTabs,
    initTooltips,
    initPopovers,
    initDials,
]);
events.init();
Is there a way to not include that or would we have to write our own Flowbite index.ts?

I suppose another long term solution would be to init components with MutationObservers, but that's quite a change.

Yes, there is a way. You can initialise them yourself using initFlowbite(); or create the objects like new Modal() and new Dropdown() for each component.

hs-dliaska · 2023-03-27T14:58:45Z

@zoltanszogyenyi, thank you I'll try that. what could be the issue here tho: The requested module 'flowbite' does not provide an export named 'initFlowbite'?

i have this line in my importmap
pin 'flowbite', to: 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.turbo.min.js', preload: true

and import it in application.js
import 'flowbite'

zoltanszogyenyi · 2023-03-27T15:03:00Z

Hey @hs-dliaska,

Because you need to make sure that Flowbite has been imported into your source JavaScript file.

Here's the source code for what you actually import we using import 'flowbite':

https://github.com/themesberg/flowbite/blob/main/src/index.ts

So you should try this instead:

import { initFlowbite } from "flowbite";

Can you confirm?

Cheers,
Zoltan

hs-dliaska · 2023-03-27T15:21:53Z

yeah here's my flowbite_controller.js :(

import { Controller } from "@hotwired/stimulus";
import { initFlowbite } from "flowbite";

export default class FlowbiteController extends Controller {
  initialize() {
    initFlowbite();
  }
}

and i have this imported on my local:

although it seems i miss something but not sure what

Screen.Recording.2023-03-27.at.11.56.14.AM.mov

I also confused how it suppose to import initFlowbite if it's not included here? https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.6.4/flowbite.turbo.min.js

I was trying to resolve it with initDropdowns but I can't import it either even tho it's in the file. however as you can see Flowbite.default works.

hs-dliaska · 2023-03-28T13:04:50Z

I made it work with this however would be nice to consider some better options. not sure why I couldn't make it work just with initDropdown or initFlowbite method.

import { Controller } from "@hotwired/stimulus";

export default class FlowbiteController extends Controller {
  initialize() {
    document
        .querySelectorAll('[data-dropdown-toggle]')
        .forEach(function ($triggerEl) {
        var dropdownId = $triggerEl.getAttribute('data-dropdown-toggle');
        var $dropdownEl = document.getElementById(dropdownId);
        if ($dropdownEl) {
            var placement = $triggerEl.getAttribute('data-dropdown-placement');
            var offsetSkidding = $triggerEl.getAttribute('data-dropdown-offset-skidding');
            var offsetDistance = $triggerEl.getAttribute('data-dropdown-offset-distance');
            var triggerType = $triggerEl.getAttribute('data-dropdown-trigger');
            var delay = $triggerEl.getAttribute('data-dropdown-delay');
            new Dropdown($dropdownEl, $triggerEl, {
                placement: placement ? placement : 'bottom',
                triggerType: triggerType
                    ? triggerType
                    : 'click',
                offsetSkidding: offsetSkidding
                    ? parseInt(offsetSkidding)
                    : 0,
                offsetDistance: offsetDistance
                    ? parseInt(offsetDistance)
                    : 10,
                delay: delay ? parseInt(delay) : 300,
            });
        }
        else {
            console.error("The dropdown element with id \"".concat(dropdownId, "\" does not exist. Please check the data-dropdown-toggle attribute."));
        }
    });
  }
}

bodhish · 2023-04-08T15:41:51Z

@hs-dliaska ☝️ you suggestion worked worked for me.

// flowbite_controller.js
import { Controller } from "@hotwired/stimulus";
import "flowbite";
export default class FlowbiteController extends Controller {
  initialize() {
    document
      .querySelectorAll("[data-dropdown-toggle]")
      .forEach(function ($triggerEl) {
        var dropdownId = $triggerEl.getAttribute("data-dropdown-toggle");
        var $dropdownEl = document.getElementById(dropdownId);
        if ($dropdownEl) {
          var placement = $triggerEl.getAttribute("data-dropdown-placement");
          var offsetSkidding = $triggerEl.getAttribute(
            "data-dropdown-offset-skidding"
          );
          var offsetDistance = $triggerEl.getAttribute(
            "data-dropdown-offset-distance"
          );
          var triggerType = $triggerEl.getAttribute("data-dropdown-trigger");
          var delay = $triggerEl.getAttribute("data-dropdown-delay");
          new Dropdown($dropdownEl, $triggerEl, {
            placement: placement ? placement : "bottom",
            triggerType: triggerType ? triggerType : "click",
            offsetSkidding: offsetSkidding ? parseInt(offsetSkidding) : 0,
            offsetDistance: offsetDistance ? parseInt(offsetDistance) : 10,
            delay: delay ? parseInt(delay) : 300,
          });
        } else {
          console.error(
            'The dropdown element with id "'.concat(
              dropdownId,
              '" does not exist. Please check the data-dropdown-toggle attribute.'
            )
          );
        }
      });
  }
}

And usage

    <button data-controller="flowbite" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots>" class="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-white rounded-lg hover:bg-gray-100 focus:outline-none " type="button">
      <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path></svg>
    </button>

giugrilli · 2023-04-19T13:52:41Z

At the moment, Flowbite Turbo initializes on these two events: "turbo:load" and "turbo:frame-load"

However, in order to cover all cases (for example a form that returns 422 - Unprocessable Entity),
flowbite turbo should also fire on: "turbo:render"

ousmaneNdiaye · 2023-06-01T14:02:26Z

You can check out an example for this in the latest comment for this issue: #499

import { Controller } from "@hotwired/stimulus";
import { initFlowbite } from "flowbite";

export default class extends Controller {
  initialize() {
    initFlowbite();
  }
}

And then:

<%= turbo_frame_tag id="flash" do %>
  <div data-controller="controller-name">
    <%= render "layouts/flash" %>
  </div>
<% end %>

I had the same issue with Symfony Ux Turbo and it worked 👍🏼

fzf · 2024-02-19T19:05:42Z

Is there something that I am missing here on how to get this to work? Following the Rails instructions it looks like you npm install flowbite mostly for the tailwind integration. I used the importmap pinning it to the turbo.min.js and requiring it in application.js and still when a page reloads the flowbite code does not work properly.

I have https://github.com/fzf/flowbite-test that replicates the behavior.

kkurcz · 2024-02-19T19:28:10Z

Is there something that I am missing here on how to get this to work? Following the Rails instructions it looks like you npm install flowbite mostly for the tailwind integration. I used the importmap pinning it to the turbo.min.js and requiring it in application.js and still when a page reloads the flowbite code does not work properly.

I have https://github.com/fzf/flowbite-test that replicates the behavior.

Honestly, best to just use esbuild and follow the instructions of the original post, @filser89 explained it pretty well. I’ll ask him if there’s any updates on how best to implement.

AndrewNgKF · 2024-02-24T03:41:04Z

Thanks for this! @giugrilli

At the moment, Flowbite Turbo initializes on these two events: "turbo:load" and "turbo:frame-load"

However, in order to cover all cases (for example a form that returns 422 - Unprocessable Entity), flowbite turbo should also fire on: "turbo:render"

Using Flowbite with Rails 7 via importmaps and flowbite was not working after form submit with a 422

I'd prefer a more elegant solution, but this works.

// application.js
import "flowbite";

window.document.addEventListener("turbo:render", (_event) => {
  window.initFlowbite();
});

// or 

window.document.addEventListener("turbo:submit-end", (_event) => {
  window.setTimeout(() => {
    window.initFlowbite();
  }, 10);
});

// importmap.rb
pin 'flowbite', to: 'https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.turbo.min.js'

Hope this helps you as well @fzf

fzf · 2024-02-24T18:48:49Z

@AndrewNgKF this worked! Thank you for the suggestion

scottwater · 2024-05-24T13:55:14Z

I wanted to add this is still an issue on Rails 7, but @AndrewNgKF's suggestion does get it working again

StoreCarCharIsInNoSave · 2024-06-13T18:37:25Z

Thanks mate

jeremystephencobb mentioned this issue Apr 16, 2022

use turbo:load instead of DOMContentLoad #136

Closed

reefdog mentioned this issue Apr 22, 2022

Reduce/eliminate our Node use TechAndCheck/zenodotus#188

Closed

reefdog mentioned this issue Apr 27, 2022

Add Flowbite to the project TechAndCheck/zenodotus#195

Merged

puglet5 added a commit to puglet5/hsdb that referenced this issue Jun 27, 2022

flowbite patch to work with turbolinks (adapted from themesberg/flowb…

cc0afe0

…ite#88 -- git apply flowbite.patch)

filser89 closed this as completed Aug 3, 2022

filser89 reopened this Aug 3, 2022

jbbarth mentioned this issue Aug 15, 2022

Add missing step in Rails getting started doc #241

Merged

em429 mentioned this issue Nov 29, 2022

Flowbite and Turbo Rails 7 with import map #305

Closed

jmnda-dev mentioned this issue Mar 13, 2023

Setup Flowbite to work with Phoenix LiveView #486

Closed

rizkypsr mentioned this issue Apr 2, 2023

[Snyk] Upgrade flowbite from 1.6.3 to 1.6.4 rizkypsr/e-monev-frontend#27

Closed

kaitosuzuki-github mentioned this issue Apr 16, 2023

flowbiteをimportmapを使い、アプリに導入する kaitosuzuki-github/pinspot#66

Closed

1 task

snyk-bot mentioned this issue Apr 23, 2023

[Snyk] Upgrade flowbite from 1.4.7 to 1.6.4 brhanegiday/nabtana-frontend#5

Open

KilianSoudier mentioned this issue Apr 28, 2023

[Snyk] Upgrade flowbite from 1.6.3 to 1.6.4 KilianSoudier/ressourcesrelationnellesreact#3

Open

hs-dliaska mentioned this issue May 16, 2023

Getting error when trying to use Modal #526

Closed

m1kql mentioned this issue May 25, 2024

[Snyk] Upgrade flowbite from 1.5.3 to 1.8.1 m1kql/ewmu#95

Open

AndresElacion mentioned this issue Sep 24, 2024

[Snyk] Upgrade flowbite from 1.6.3 to 1.8.1 AndresElacion/Imperial-home#2

Open

Flowbite with Turbo on rails7 #88

Flowbite with Turbo on rails7 #88

Comments

filser89 commented Feb 9, 2022

seanbjornsson commented Feb 23, 2022 • edited Loading

codenashwan commented Mar 23, 2022

kkurcz commented Mar 30, 2022

skipmaple commented Apr 8, 2022

spacerobotTR commented May 28, 2022

puglet5 commented Jun 28, 2022

blump commented Jul 5, 2022 • edited Loading

jsbaltodano commented Jul 20, 2022

mikelieser commented Jul 20, 2022 • edited Loading

filser89 commented Aug 3, 2022 • edited Loading

TsubasaKawajiri commented Aug 8, 2022 • edited Loading

archonic commented Sep 1, 2022 • edited Loading

Rodeoclash commented Sep 15, 2022

egze commented Sep 15, 2022

IndieVar commented Oct 5, 2022 • edited Loading

indigodavid commented Oct 13, 2022 • edited Loading

sevos commented Nov 6, 2022

vladiim commented Nov 7, 2022

app/views/shared/_nav.html.erb

app/javascripts/controllers/dropdown_controller.js

app/javascripts/application.js

sevos commented Nov 7, 2022

fernandokbs commented Dec 3, 2022

archonic commented Mar 21, 2023

alhafoudh commented Mar 22, 2023

hs-dliaska commented Mar 23, 2023

archonic commented Mar 23, 2023

rodrigolj commented Mar 26, 2023

zoltanszogyenyi commented Mar 27, 2023

zoltanszogyenyi commented Mar 27, 2023 • edited Loading

zoltanszogyenyi commented Mar 27, 2023

zoltanszogyenyi commented Mar 27, 2023

hs-dliaska commented Mar 27, 2023

zoltanszogyenyi commented Mar 27, 2023

hs-dliaska commented Mar 27, 2023 • edited Loading

hs-dliaska commented Mar 28, 2023

bodhish commented Apr 8, 2023

giugrilli commented Apr 19, 2023 • edited Loading

ousmaneNdiaye commented Jun 1, 2023 • edited Loading

fzf commented Feb 19, 2024

kkurcz commented Feb 19, 2024 • edited Loading

AndrewNgKF commented Feb 24, 2024 • edited Loading

fzf commented Feb 24, 2024

scottwater commented May 24, 2024

StoreCarCharIsInNoSave commented Jun 13, 2024

seanbjornsson commented Feb 23, 2022 •

edited

Loading

blump commented Jul 5, 2022 •

edited

Loading

mikelieser commented Jul 20, 2022 •

edited

Loading

filser89 commented Aug 3, 2022 •

edited

Loading

TsubasaKawajiri commented Aug 8, 2022 •

edited

Loading

archonic commented Sep 1, 2022 •

edited

Loading

IndieVar commented Oct 5, 2022 •

edited

Loading

indigodavid commented Oct 13, 2022 •

edited

Loading

zoltanszogyenyi commented Mar 27, 2023 •

edited

Loading

hs-dliaska commented Mar 27, 2023 •

edited

Loading

giugrilli commented Apr 19, 2023 •

edited

Loading

ousmaneNdiaye commented Jun 1, 2023 •

edited

Loading

kkurcz commented Feb 19, 2024 •

edited

Loading

AndrewNgKF commented Feb 24, 2024 •

edited

Loading