The submenu within the menu fails to expand

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-sm navbar-light bg-light">

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle" dropdownToggle>

</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let language of languages" (click)="setLanguage(language)">

<span style="vertical-align: super;"></span>
</a>
</div>
</li>

<!-- utente con avatar -->
<li class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link float-right mt-1 pr-4" dropdownToggle>
<span class="float-left mt-1">
          <i class="fa fa-user" style="font-size: 1.5rem;"></i>
          <!-- prevedere user image -->
        </span>
<span class="float-right mt-1 ml-1">
          <div><b>user</b></div>
          <div *ngIf="currentUser.roles && currentUser.roles.length == 1">desc</div>
          <div *ngIf="currentUser.roles && currentUser.roles.length > 1">role</div>
        </span>
</a>
<!-- menu -->
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<!-- logo confidi -->
<div class="dropdown-item text-center user-image">
<img [src]="userService.getUserPicture(currentUser?.image?.content)" class="img-fluid" alt="">
        </div>
<!-- ultimo accesso -->
<div class="dropdown-item">
<div class="font-weight-bold">access </div>
<div>date</div>
</div>
<!-- matricola -->
<div class="dropdown-item">
<div class="font-weight-bold">numer </div>
<div>user</div>
</div>
<!-- ruoli -->
<div class="nav-item dropdown mr-2 cursor-pointer" dropdown>
<a class="btn nav-link dropdown-toggle font-weight-bold" dropdownToggle>roles</a>
<div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
<a class="btn dropdown-item" *ngFor="let role of currentUser.roles; let i = index">
code - desc
</a>
</div>
</div>


<a class="dropdown-item logout-link" (click)="logout()">
<i class="fa fa-lock"></i> <span class="font-weight-bold">logout</span></a>
</div>
</li>


</ul>
</div>
</nav>
</header>

I've implemented a dropdown-menu with multiple dropdown items, including a submenu that contains a list of items. However, the submenu is not opening as expected. Could you please help me figure out why it's not working?

Here's the link to the StackBlitz:

The submenu labeled roles is not functioning properly. How can I resolve this issue?

javascripthtmlcssangularngx-bootstrap

Answer №1

The issue arises from the HTML structure - nesting <li> tags inside each other is not allowed.

The <li> element in HTML denotes an item in a list and should be enclosed within a parent element like an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>).

Source: Reference from MDN web docs

However, it is perfectly acceptable to place <ul> within a <li>, which is the correct way to create nested lists.

Additionally, attempting to use nested dropdowns could still be considered an experimental feature of ngx-bootstrap.

Here's a basic working example:

 <!-- template.html !-->
<ul >
  <li dropdown [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Languages <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem" *ngFor="let lang of languages"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{lang}}</a></li>


  </ul>
  </li>

  <li dropdown [autoClose]="false" container="body">
       <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">User <span class="caret"></span></a>

  <ul id="dropdown-nested" *dropdownMenu class="dropdown-menu"
      role="menu" aria-labelledby="button-nested">
    <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Settings</a></li>

    <li role="menuitem" dropdown triggers="mouseover" placement="right" container="body">
      <a dropdownToggle class="dropdown-item dropdown-toggle"
         (click)="false">Roles<span class="caret"></span></a>
      <ul *dropdownMenu class="dropdown-menu" role="menu">
        <li role="menuitem" *ngFor="let role of currentUser.roles"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">{{role}}</a></li>
      </ul>
    </li>

      <li role="menuitem"><a class="dropdown-item" href="#/dropdowns#nested-dropdowns">Logout</a></li>
  </ul>
  </li>
</ul>



// Component.ts
import { Component } from '@angular/core';
    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html'
    })
    export class AppComponent {
      public menu: {}[] = [];
      languages = ['pl', 'en', 'de', 'es'];
      currentUser = {roles: ['admin', 'inboxUser', 'developer']}
    }

Demo on Stackblitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The issue of finding a nested object key using dot notation in Vue JS with lodash is resulting in

I am facing an issue where I am unable to retrieve a value for a nested object key from the eligibility array. The value is coming out as undefined and I need help in figuring out what mistake I am making. Here is the given array: const eligibilityCriteri ...

javascriptvue.jslodash

Utilize Angular's ability to set values in line while clicking using an asynchronous function

I am facing a unique challenge where I need to assign a value to a variable inline using a click event that triggers an async function call. The scenario involves rendering a deeply nested and complex set of objects on the screen within an ng-template (e.g ...

angularangular-promise

Having trouble displaying a single result in CodeIgniter using PHP and MySQL?

Embarking on my CodeIgniter journey, I am eager to display a percentage result in the view of my project. Once this issue is resolved, the path ahead will be much smoother. Here is the model function snippet: <?php public function _construct() { ...

phphtmlsqlcodeigniterview

Using HTML input checkboxes in conjunction with a JavaScript function

After creating a basic payment form using HTML/CSS/JS, I wanted to implement checks on user inputs using HTML patterns. In addition, I aimed to display a pop-up alert using JS to confirm the form submission only after all necessary inputs are correctly fil ...

javascripthtmlcss

Obtain saved browsing history in HTML5 with the use of JavaScript

I'm currently utilizing the History.js library found at https://github.com/browserstate/History.js/ to create an AJAX-based application that leverages the HTML5 History API for dynamically changing the URL and title of the browser. Does anyone have s ...

javascripthtml

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

Is there a way to retrieve the coordinates for the center of the current area being viewed on Google Maps using JavaScript and the Google Maps JavaScript API v3? Any help would be greatly appreciated. Thank you! ...

javascriptgoogle-maps-api-3

No results found with mongoose.findOne

I'm attempting to fetch a todo based on its ID. The code for the getTodo service method is shown below: const getTodo = async (id, userId) => { const todo = await Todo.findOne({ id: id, userId: userId }); return todo; }; The code from the rout ...

javascriptnode.jsmongodbexpressmongoose

Changing the appearance of a website by applying various stylesheets based on the size of the browser window in

After implementing the code below to switch between stylesheets based on browser height, I encountered a small issue. The code works perfectly when the page first loads or when the window is resized and then refreshed. However, I'm curious if there&ap ...

javascriptcss

Transmit a JavaScript function using JSON

I am working on a server-side Python script that generates a JSON string with parameters for a JavaScript function on the client side. # Python import simplejson as json def server_script() params = {'formatting_function': 'foobarfun&apo ...

javascriptjsonfunctionobject

The background image will expand to fill any available space

I'm currently working on rendering divs with a background image CSS property. The images have fixed sizes, and I want to display them in a grid layout. However, the divs with background images stretch when there is extra space available, which is not ...

htmlcss

Content on Google sites filling the entire screen space

My current project involves creating a webpage on Google Sites for school. However, the site's appearance is not what I intended. Instead of displaying as I designed it, the page has extra elements that were added automatically by Google Sites. Is the ...

htmlcssgoogle-sites

Submission error occurs if file upload is absent

When attempting to submit a form with a file, I encounter issues if the selected file for upload is changed (e.g. renamed) before submitting the form. The form fails to submit. Below is an example of my code: <form action="test.htm" method="post" encty ...

javascriptjqueryhtmlsubmitform-submit

Tips for utilizing ng-model in an Angular application

<input type="search" placeholder="{{'COMPONENT_PROPERTIES.SEARCH_ICON' | translate}}" ng-model="icon.name" list="classIcon" ng-change="changeFn(icon.name)"> <i class="{{$select.selected}}"></i> &nbsp;&nbsp; {{$s ...

angularjshtml

Is there a way for me to modify the color of the currently selected button?

I've been attempting to change the color of the active button when clicked, but my CSS class "activePage" isn't doing the trick. Ideally, clicking the "projects" button should turn it red, and clicking the "about" button should change it to red w ...

javascriptjqueryhtmlcssbutton

Protractor and Jasmine fail to fulfill the promise of retrieving a webpage title

I am facing an issue with my protractor/jasmine test code where it only prints out 1 and 2, then hangs and times out. It seems like there might be a problem with the click() action on the button element or the promise on the getTitle method of the browser ...

javascriptangularjsselenium-webdriverjasmineprotractor

Storing TypeScript functions as object properties within Angular 6

I am working on creating a simplified abstraction using Google charts. I have implemented a chartservice that will act as the abstraction layer, providing options and data-source while handling the rest (data retrieved from a REST API). Below is the exist ...

javascriptangularfunctiontypescriptobject

Switching Profiles in XPages

In my Xpages project, I have two different user profiles set up. I am currently attempting to develop a function that would allow me to easily switch between these two profiles. However, I am unsure of the steps needed to accomplish this task. ...

javascriptjavaxpageslotus-notes

What is the best way to combine two objects in AngularJS?

https://i.sstatic.net/qr5Bb.png If you have two JSON objects that need to be merged while removing duplicate properties, what approach would you take? ...

javascriptangularjsjson

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

I'm attempting to utilize jsymal.safeDump(somedata). So far, I've executed npm install --save-dev @types/js-yaml I've also configured my tsconfig file as: { "compilerOptions": { "types": [ "cypress" ...

javascripttypescriptjs-yaml

AngularJS tiger striping for a hidden rows table

I'm facing an issue where I need to add zebra stripes to a table with hidden rows using ng-hide. The problem is that when I try to stripe the rows with either CSS3 or jQuery, the coloring does not work correctly. You can see an example below. In this ...

jqueryangularjscss