Develop Reference

Dropdown on icon, bootstrap

I'm using bootstrap (I have bootstrap and jquery included and dropdowns working elsewhere) and tryingo to use my profile icon as a trigger for a dropdown with an option to logout.
My profile icon is showing the downward caret like it's a dropdown, but when I click there is no dropdown triggered.
I can't use a button here, it needs to be tied to the icon.
What exactly am I doing wrong?
<div class="dropdown">
<div class="menu-button profile dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="far fa-user-circle fa-2x"></i>
</div>
<ul class="dropdown-menu">
<li>Logout</li>
</ul>
</div>

Not auto collapse when creating sub item in menu of Bootstrap Adminlte template

First of all I am a developer, not a designer.
I am building Codeigniter project using Adminlte template. Now I face a problem. I will try to explain it using screenshots.
Screenshot 01 : This is the menu
Screenshot 02 : I am going to click User List Item
Question : When I click "User List" I am expecting that page menu also same as screenshot 02.(I mean user mangment menu should be open / collapse auto automatically). But I am getting interface like screenshot 1. How do I solve it?
Note : Please asked if you need some additional codes of my site because I don't know what codes should I put here.
<ul class="sidebar-menu">
<li><i class="fa fa-book"></i> <span>Home</span></li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span>User Management</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> User List</li>
<li><i class="fa fa-circle-o"></i> Add New User</li>
</ul>
</li>
<li><i class="fa fa-book"></i> <span>Messages</span></li>
<li><i class="fa fa-book"></i> <span>Logout</span></li>
</ul>

Try adding class "active" to the list item which needs to be stayed open.
<li class="active">

I think that you have to add active class to li tag to work.

Why more than 1 drop downs are not working in Materializecss?

I have multiple drop down menus on the single page. I am using Materializecss.com. The Error is, I am getting values of the first drop down in every dropdown menu in the whole page. Here is the code.
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
The Problem is, For example, If I have the list of 5 users on the same page, I am getting values of the first user in all the dropdown menus. I don't know what's wrong.
I tried to change class to ID but not working. I am a bit new to Jquery.
UPDATE: Okay, I found the error. Here is the new code that works! Thanks for Help StackOverflow!
#if($user->is_banned != 1)
<a class='dropdown-button btn-flat' href='#' data-constrainWidth="false" data-activates='dropdownUser-{{ $user->id }}'><i class="material-icons left">expand_more</i> More</a>
<ul id="dropdownUser-{{ $user->id }}" class="dropdown-content">
<li><i class="material-icons left">insert_chart</i>BAN</li>
<li><i class="material-icons left">delete</i>Delete</li>
</ul>
#else
I Updated the working code instead of deleting the question because there might be many developers looking for the same solution!

I have faced same issue working with materialize css.
I used
$('#tag_id').material_select();
while document is getting ready.

not able to click on element from drop down list?

HTML code :
<ul class="dropdown-menu" role="menu">
<li>
<a href="#/profile">
<i class="fa fa-user"></i> My Profile </a>
</li>
<li>
<a href="#/source">
<i class="fa fa-user"></i> Source </a>
</li>
<li>
<a href="/user/logout">
<i class="fa fa-user"></i> Logout </a>
</li>
</ul>
My code :
element(by.cssContainingText('i.fa.fa-user', ' My Profile ')).click();
Problem : I am trying to click on element using class and cssContaingText but am not able to it. Please help me.
please help me

You may have solved it via the by.cssContainingText also. The problem with your current approach is that you are checking the text inside the i element, which is in your case empty:
<i class="fa fa-user"></i> My Profile
The text to check is located inside the a element:
element(by.cssContainingText('ul.dropdown-menu > li > a', 'My Profile')).click();
Alternatively, you may solve it without checking the text:
element(by.css("a[href*=profile]")).click();
Though, I would agree that "by partial link text" option is a better choice in this case.

I got the answer : I tried this code, it worked nicely.
element(by.partialLinkText('My Profile')).click();

Prettify html output after using append()

I have the following code:
$.getJSON('json/sites.json', function(data) {
$.each(data, function(index,element){
$('#menu').append('\
<li class="treeview">\
<a href="#">\
<i class="fa fa-dashboard"></i> <span>Dashboard 2</span> <i class="fa fa-angle-left pull-right"></i>\
</a>\
<ul class="treeview-menu">\
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>\
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>\
</ul>\
</li>\
');
});
});
Although it does what it has to do, the output of the HTML is messed up. Something like:
<div id="menu" class="sidebar-menu"> <li class="treeview">
<a href="#"> <i class="fa fa-dashboard"></i>
<span>Europe</span> <i class="fa fa-angle-left pull-right"></i>
</a> <ul class="treeview-menu"> <li><i class="fa fa-circle-o"></i> Germany</li>
<li class=""><a href="index2.html"><i class="fa fa-circle-o"></i>
Greece</a></li> </ul> </li> <li
class="treeview"> <a href="#"> <i
class="fa fa-dashboard"></i> <span>Dashboard 2</span>
...
I know that it is a minor "problem", but the JSON has about 200 objects and it makes things more difficult to debug for someone other than me. Is there any way to append html code to element object keeping the desired structure?

Aside from the fact that you have no dynamic data from the JSON object in that HTML chunk, which makes me wonder why would you even want to inject it with JavaScript in the first place, it's worth noting that browser-generated output is only debugabble using something like Chrome Developer Tools which makes the formatting completely irrelevant, as the code can be easily viewed using the DOM browser.
On the other hand, if you must format that code properly, I'd suggest using a templating engine like mustache.js or handlebars.js.