Clay Dropdown doesn't workClay Dropdown doesn't workhttps://liferay.dev/en/c/message_boards/find_thread?p_l_id=119785333&threadId=1212279852024-03-28T22:17:04Z2024-03-28T22:17:04ZClay Dropdown doesn't workEric COQUELINhttps://liferay.dev/en/c/message_boards/find_message?p_l_id=119785333&messageId=1212279842021-11-02T20:10:09Z2021-11-02T20:10:08Z<p>Dear community,</p>
<p>Based on Clay, I should be able to make dropdown work quite easily: https://clayui.com/docs/components/drop-down.html</p>
<p>Here is a sample of code</p>
<pre>
<code class="language-html"><div class="fragment_355">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div aria-labelledby="dropdownMenuButton" class="dropdown-menu">
<ul class="list-unstyled">
<li><a class="active dropdown-item" href="#1">Selected Option</a></li>
<li><a class="dropdown-item" href="#3">Normal Option</a></li>
<li>
<a class="disabled dropdown-item" href="#4" tabindex="-1">Disabled Option</a>
</li>
</ul>
</div>
</div></code></pre>
<p>When I put this piece of code into a fragment, I would expect the
dropdown to initialize automatically. But nothing happens.</p>
<p>From the console of my Liferay home page (no theme customization), I
tried to run the following</p>
<pre>
<code class="language-javascript">$("#dropdownMenuButton").dropdown();</code></pre>
<p>I wanted to check if "dropdown" function was available.
But... that's not the case.</p>
<p>Copying the dropdown fragment which comes with Liferay, I noticed
that it doesn't use Clay but only native javascript. Which is surprising...</p>
<p>Can you please explain why :</p>
<ul>
<li>fragment can't use JQuery or Clay libraries</li>
<li>Clay components are not available from the Liferay home page</li></ul>
<p>Thank you.