DestroyedSoul

DestroyedSoul

Hello,

I am using Flowbite in my code for a dropdown component.
I use Flowbite via CDN. Here’s the code in question:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.phoenix.min.js">
      </script>
      <button
        id="dropdownDefaultButton"
        data-dropdown-toggle="dropdown"
        class="bg-white hover:bg-accent/20 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center border"
        type="button"
      >
        Click
      </button>
     <!-- Dropdown menu code -->
    <div id="dropdown" class="z-10 hidden bg-background-secondary rounded-lg shadow w-60">
        <ul class="p-3 space-y-1 text-lg text-primary" aria-labelledby="dropdownDefaultButton">
          <!-- some code here -->
        </ul>
    </div>

The problem, as usually is with live views.
Let’s call the screen with dropwons Screen A. When I enter it, dropdown works, then I go to screen B and back to screen A → the dropdown works.
But when I go to screen B and push_navigate from there to Screen A, the dropdown does not work (i.e. it’s not displayed after clicking the button).

I have tried solutions from here: Tailwind Javascripts stop working after live redirects between liveviews
It did not help.

Could you please advise whether I am doing something wrong?

Showing Posts 1 to 4

jmnda

jmnda

I tried to reproduce on my end but everything is working fine. Can you share the whole LiveView or if possible create a demo repo?

DestroyedSoul

DestroyedSoul OP

Here’s the repo.

It’s even worse than in my project.
If you load the page as localhost:4000/view-b, then the dropdown works. If you go there from home or view-a, it doesn’t.

jmnda

jmnda

I checkout out your repo and after testing, I think he issue is that you added the script tag for Flowbite in the LiveView markup instead of the root.html.heex. Putting it in the <head> of the root.html.heex resolves the issue, that’s because the script is loaded upfront so every navigate/patch which dispatches phx:page-loading-stop event after the update will initialize Flowbite js enabling the interactive elements like dropdowns, modals, and navbars to work.

DestroyedSoul

DestroyedSoul OP

That was it!
Thank you a lot.

— All posts loaded —

Where Next? Top

Trending in Questions Top

katta
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
brecabral
Documentation While reading the Scoped Routes section, I noticed that the documentation currently refers to a problem without explainin...
New
achenet
Hello, I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind. However, when I launch mix phx.server, I get an error...
New
kpanic
Hi everyone, I am toying with the idea of building a “match maker” for giving personal help to people that wants to start coding. I sta...
New
velrest
So my question is quite simple and i have found no conclusive answer on forum, google or AI. Should we use :erlang.float for Integer to ...
New
asweet-confluent
I recently noticed that Elixir’s Logger defaults its primary log level to :debug when no :logger, :level application configuration is pre...
New
mnkhod
So i have been using ash framework for a while and i love it. However currently the issue im having with ash framework is the error handl...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
mhanberg
Hi everyone! The first release candidate for the Expert language server project is now available! We’ve published a press release detai...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews