DestroyedSoul

DestroyedSoul

Flowbite dropdown not working after live view push_navigate

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?

Marked As Solved

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.

Also Liked

DestroyedSoul

DestroyedSoul

That was it!
Thank you a lot.

Where Next?

Popular in Questions Top

Qqwy
Original source of discussion: This topic on the Pragmatic Programmers’ Functional Web Development with Elixir, OTP, and Phoenix forum. ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
joeerl
Hello again - after a longish gap I’ve decided I really must dig into Elixir and see what’s been happening here - so I have a few questio...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

Other popular topics Top

jononomo
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
New
hariharasudhan94
Lets say I have map like this fetching from my database %{"_id" =&gt; #BSON.ObjectId&lt;58eb1a7a9ad169198c3dXXXX&gt;, "email" =&gt; ...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
SoCreat
i’m a new one to elixir which editor can i use vs code? or atom? Thanks! :smiley:
New
WestKeys
Currently suffering from paralysis by [HTTP client] analysis. This is rather unusual in Elixirland as there tends to be consensus on the ...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement