Adminlte: Sidebar menu treeview not open when .active

[Adysone]

Hello,

First, thank you for your work, it's great. But (yes, there is a "but"), I've got a problem with the left sidebar (treeview).

With this markup, the ul.treeview-menu is not displayed and I think it should be.

<ul class="sidebar-menu">
    <li class="treeview active">
        <a href="#">
            <i class="fa fa-users"></i>
            <span>Users</span>
            <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
            <li class="active">
                <a href="##">
                    Permissions
                </a>
            </li>
            <li>
                <a href="##">
                    Other submenu
                </a>
            </li>
        </ul>
    </li>
</ul>

Result

Expected

To "solve" this, I added this CSS rule in my stylesheet, but I don't know if it's really good :

.sidebar .sidebar-menu .active .treeview-menu {
    display: block;
}

[lenamtl]

I got this once and it was because of javascript error
so inspect the menu using Chrome dev tool
this will show you the javascript error.

[Adysone]

No, there is no error. It works fine with Chrome btw, but not with Firefox, and I still don't have any error in the Firebug console.

[lenamtl]

Strange..
I'm using Chrome only, Chrome Dev tools (check in the menu More tools/ Javascript console).
I have no menu issue with FF.
Do you have the same problem on demo site?
Which FF version are you using?

Why are you using

<a href="##">

instead of

<a href="#">

[Adysone]

Oh I forgot to precise something, sometimes, it works.

<ul class="sidebar-menu">
    <li class="treeview active">
        <a href="#">
            <i class="fa fa-users"></i>
            <span>Users</span>
            <i class="fa fa-angle-left pull-right"></i>
        </a>
        <ul class="treeview-menu">
            <li class="active">
                <a href="permissions.html">
                    Permissions
                </a>
            </li>
            <li>
                <a href="submenu.html">
                    Other submenu
                </a>
            </li>
        </ul>
    </li>
</ul>

If I click on "Permissions", it will work and the menu is expanded. Fine.

Into the permissions.html page, I click on a link, for example permissions_form.html. The HTML of the menu doesn't change, I still want the "Permissions" section active, but the menu is not expanded.

I thought it was URL related but I doubt it.

[lenamtl]

It may be because the Active class is not dynamic but hardcoded.
If the menu is not included you will have to add the active class to the appropriate menu.
If you included the menu you will have to add custom javascript to make it dynamic.

[Adysone]

I don't understand what you mean by "not included"?

[lenamtl]

Let say you use PHP include to include the menu once for all your pages.
http://www.w3resource.com/php/statement/require_once.php
In this case you will need code to check which page is opened and apply the Active class to the corresponding menu item.

If you use only HTML, then you will have to set the Active class to the menu item that is corresponding to the page, you will have to do this on every page.

Do you have a live link so we can check.

[Adysone]

Oh yeah, don't worry about the "active" class, it's here, like I write in my previous posts, except if I should put the "active" class on the <ul class="treeview-menu"> too?

[lenamtl]

When used with the sidebar, for example, it would look something like this:

  <ul class='sidebar-menu'>
       <li class="treeview active">
          <a href="#">Menu</a>
         <ul class='treeview-menu'>
             <li class='active'><a href=#>Level 1</a></li>
          </ul>
      </li>
 </ul>

Add .active class to Li elements if you want the menu to be open automatically
on page load.

[Adysone]

It's exactly what I did. I don't understand... It's not a REAL problem right now, I have more important to do on this project, but when the website will be available online, I'll post a link so you'll see yourself and maybe you'll be able to tell me what I did wrong.

Thanks for your help anyway

[lenamtl]

Ok that will be easier to investigate

[kressly]

   <ul class="treeview-menu">

<li <?php if(preg_match('/locations_manage.php/i',$_SERVER['SCRIPT_NAME'])) { ?> class="active" <?php } ?> ><a href="locations_manage.php"><i class="fa fa-angle-double-right"></i> Manage </a></li>

<li <?php if(preg_match('/locations_on_map.php/i',$_SERVER['SCRIPT_NAME'])) { ?> class="active" <?php } ?> ><a href="locations_on_map.php"  ><i class="fa fa-angle-double-right"></i> Locations on Map </a></li> 

</ul>

Do that for all your links and it will be automatic. Or if you are good with Regex you define a regex that wil take anything you have inside href and compare it to $_SERVER['SCRIPT_NAME'] and if it matches, then you add the class active

[Adysone]

@kressly I think you misunderstand my issue. Take another look to my HTML to see I did put the "active" class where it should be but the treeview doesn't expand...

[almasaeed2010]

This issue has been solved in AdminLTE 2.0. The app.js version you are using @Adysone contains the issue since it is responsible of opening active menus. The new version of the sidebar has been converted into an accordion and app.js is no longer looking for active classes because we changed the css rules to display the active menus properly. I will leave the issue open until we release 2.0 alpha.

[Adysone]

Ok thank you very much!

Anthony D.

[micheledallatorre]

@almasaeed2010 With the latest AdminLTE version, do we still need to include custom code to identify and add the _active_ class as shown in https://github.com/almasaeed2010/AdminLTE/issues/218#issuecomment-71231994 or in http://stackoverflow.com/questions/11533542/twitter-bootstrap-add-active-class-to-li , or is there a better way to achieve this?

Thanks!

[zubaer-ahammed]

I have found it works when I enter full URL instead of relative URL.
Example:
Instead of using <a href="/food">Food</a>
I used <a href="http://zubaer.com/food">Food</a>
And it works fine.

[schcarlos1873]

In react after login, I had problem with resize and treeview. I solved the problem using jquery on componentDidMount() method.

export default class App extends React.Component {
componentDidMount () {
jquery('body').layout('fix');
jquery('body').layout('fixSidebar');
jquery(document).ready(() => {
const trees = jquery('[data-widget="tree"]');
trees.tree();
});
}
render() {
return (
....
);
}
}