any css lost in sidenav example ?

Topic: any css lost in sidenav example ?

DEVGASA priority asked 1 year ago

Hello, we have implemented this code:

https://mdbootstrap.com/previews/mdb-ui-kit/sidenav/4.html

*. MDB Navigation Navigation template based on MDB documentation with the following settings:

Hidden on screens smaller then 1400px padding-left: 240px added via CSS to the header and main on the screens larger then 1400px to push the content out of the sidenav area Sidenav toggler added to the Navbar and hidden on screen larger then 1400px On screens smaller then 1400px sidenav mode changes from side to over.

but the dropdown options are not working well, what can we check?

our .scss file has the following content

@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
@import "@fortawesome/fontawesome-free/scss/solid.scss";
@import "@fortawesome/fontawesome-free/scss/regular.scss";
@import "@fortawesome/fontawesome-free/scss/brands.scss";// MDB SCSS
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";

![The menu is very aligned to the right, the menu cannot be displayed to log out][1]

enter image description here

Arkadiusz Idzikowski staff commented 1 year ago

Did you copy all the HTML/TS/SCSS code from the Angular documentation: https://mdbootstrap.com/docs/angular/navigation/sidenav/#subsection-mdb-navigation?

DEVGASA priority commented 1 year ago

hi @Arkadiusz Idzikowski , thank you for you response, yes we are did copy all

is missing any css for this ?

enter image description here

when we set the margin-left: -50px; this moved a bit, but this is not the correct solution

our html code

<!-- Avatar -->
            <li mdbDropdown class="nav-item dropdown">
              <a
                mdbDropdownToggle
                class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
                id="navbarDropdownMenuLink"
                role="button"
                aria-expanded="false"
              >
                <img
                  src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
                  class="rounded-circle"
                  height="22"
                  alt=""
                  loading="lazy"
                />
              </a>
              <ul
                mdbDropdownMenu
                class="dropdown-menu dropdown-menu-end"
                aria-labelledby="navbarDropdownMenuLink"
              >
                <li><a class="dropdown-item">My profile</a></li>
                <li><a class="dropdown-item">Settings</a></li>
                <li (click)="logout()"><a class="dropdown-item">Logout</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- Container wrapper -->
      </nav>
      <!-- Navbar -->

hi @Arkadiusz Idzikowski , thank you for you response, yes we are did copy all

is missing any css for this ?

when we set the margin-left: -50px; this moved a bit, but this is not the correct solution

our html code

<pre class="prettyprint"><code>
 <li mdbDropdown class="nav-item dropdown">
 <a
 mdbDropdownToggle
 class="nav-link dropdown-toggle hidden-arrow d-flex align-items-center"
 id="navbarDropdownMenuLink"
 role="button"
 aria-expanded="false"
 >
 <img
 src="https://mdbootstrap.com/img/Photos/Avatars/img (31).jpg"
 class="rounded-circle"
 height="22"
 alt=""
 loading="lazy"
 />
 </a>
 <ul
 mdbDropdownMenu
 class="dropdown-menu dropdown-menu-end"
 aria-labelledby="navbarDropdownMenuLink"
 >
 <li><a class="dropdown-item">My profile</a></li>
 <li><a class="dropdown-item">Settings</a></li>
 <li (click)="logout()"><a class="dropdown-item">Logout</a></li>
 </ul>
 </li>
 </ul>
 </div>
 
 </nav>
 
</code></pre>

Please insert min. 15 characters.

DEVGASA priority commented 1 year ago

hi @Arkadiusz Idzikowski , thank you for you response, yes we are did copy all

Add comment

Arkadiusz Idzikowski staff answered 1 year ago

0 0 Best answer

I think it might be the same problem as mentioned here: https://mdbootstrap.com/support/angular/issue-with-dropdown/

This bug will be fixed in the new version. For now, please try to use the workaround I provided in this thread.

DEVGASA priority commented 1 year ago

hi we copy all the HTML/TS/SCSS code from the Angular documentation: https://mdbootstrap.com/docs/angular/navigation/sidenav/#subsection-mdb-navigation and work with your workaround and this don't work..

please you can try to implement the https://mdbootstrap.com/docs/angular/navigation/sidenav/#subsection-mdb-navigation this code and check if you can replicate the issue ?

Please insert min. 15 characters.

Rafał Seifert free commented 1 year ago

We've recreated this sidenav and we couldn't replicate your problem. Make sure you have all necessary imports and this style:

.dropdown-menu { position: inherit;}

is added to global styles.scss file.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Priority
Premium support: Yes
Technology: MDB Angular
MDB Version: MDB5 5.0.0
Device: PC
Browser: Chrome 117.0.5938.63
OS: Windows 11
Provided sample code: No
Provided link: Yes

DEVGASA

0Support score
11Questions 8Answers 0Snippets