Menu
I'm trying to dynamically create HTML cards in javascript that include a Materialize dropdown-trigger.
posts.forEach(function(element) {
....
message += '<a class="dropdown-trigger btn-flat" data-target="drop1">';
message += '<i class="material-icons">more_vert</i>';
message += '</a>';
document.getElementById("post" + index).innerHTML = message;
index++;
}, this);
M.AutoInit();
HTML menu content:
<ul id="drop1" class="dropdown-content">
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
If I create the buttons not using the dynamic addition, everything works as expected. By dynamically adding them as shown above, the content of the menu has a height of 0:
...even though inspection shows it should have a height of 50px:
I've also tried:
Adding unique dropdown-content for each post (trigger1 opens drop1, trigger2 opens drop2, etc.)
Initializing each Trigger individually.
775
I couldn't reproduce the issue you are having but below solution may give an idea or may be helpful to solve the issue. Also, note that some assumptions are made in below code part.
var index = 1;
var posts = ["post1", "post2", "post3", "post4", "post5"];
posts.forEach(function(element) {
let post = document.createElement('div');
post.id = "post" + index;
document.body.appendChild(post);
// Remaining work..
let cloneDrop = document.getElementById("dropTemplate").cloneNode(true);
cloneDrop.style.visibility = "visible";
cloneDrop.id = "drop" + index;
document.getElementById("post" + index).appendChild(cloneDrop);
// Remaining work..
let message = '<a class="dropdown-trigger btn-flat" data-target="drop' + index + '">';
message += '<i class="material-icons">more_vert</i>';
message += '</a>';
document.getElementById("post" + index).innerHTML += message;
index++;
}, this);
M.AutoInit();<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<ul id="dropTemplate" style="visibility: hidden" href="#" class="dropdown-content">
<li><a href="#!">one</a></li>
<!--
Also, if <li/> element is being overridden by a stylesheet, following approach can be tried. (Of course, it is not so correct way)
<li style="width: 100px important; height: 50px !important">...</li>
-->
<li><a href="#!">two</a></li>
<li><a href="#!">three</a></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>JSFiddle Live Example: https://jsfiddle.net/ErdSavasci/vs37au84/
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
