Topic: Sidenave Module - Load Expanded without initial animation
*Expected behavior*When using the "hidden" property set to "false" the sidenav element loads expanded.
*Actual behavior*The sidenav element loads as collapsed and then quickly expands.
Resources (screenshots, code snippets etc.)
<mdb-sidenav-layout>
<mdb-sidenav #sidenav="mdbSidenav" [hidden]="false" scrollContainer="#scroll-container" mode=side position=absolute>
<div class="text-center">
<h3 class="py-4">Examples</h3>
<hr class="m-0" />
</div>
<ul id="scroll-container" mdbScrollbar class="sidenav-menu">
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link" aria-expanded="true">
<i class="fas fa-grin fa-fw me-3"></i>
<span slim="false">Category 1</span>
</a>
<ul class="sidenav-collapse collapse show" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span slim="false">Category
1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span slim="false">Category
1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span slim="false">Category
1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span slim="false">Category
1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link">
<i class="far fa-smile fa-fw me-3"></i><span slim="false">Link 1</span></a>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin fa-fw me-3"></i><span slim="false">Category
1</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 2</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 3</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
2</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 4</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
3</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 5</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 6</a>
</li>
</ul>
</mdb-sidenav-item>
<mdb-sidenav-item>
<a class="sidenav-link"><i class="fas fa-grin-wink fa-fw me-3"></i><span slim="false">Category
4</span></a>
<ul class="sidenav-collapse" mdbCollapse>
<li class="sidenav-item">
<a class="sidenav-link">Link 7</a>
</li>
<li class="sidenav-item">
<a class="sidenav-link">Link 8</a>
</li>
</ul>
</mdb-sidenav-item>
</ul>
<div class="text-center" style="min-height: 3rem;">
<hr class="mt-0 text-dark mb-2" />
<small>mdbootstrap.com</small>
</div>
</mdb-sidenav>
<mdb-sidenav-content #sidenavContent>
<button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggle()">
<i class="fas fa-bars"></i>
</button>
<button #sidenavToggle class="btn btn-primary" (click)="sidenav.toggleSlim()">
toggle slim
</button>
</mdb-sidenav-content>
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Opened
Specification of the issue
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 1.3.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 2 years ago
@p4k1tz Please edit your post and provide an example HTML/TS code that you use to render the component so we can reproduce this problem using the same settings.
p4k1tz free commented 2 years ago
@Arkadiusz Idzikowski done. I simply used the example html provided, elongated it to see the scroll working, and added the "hidden" property set to "false", so the sidenav would always be displayed.
Instead of being displayed when the page loads, it animates in as if the toggle is clicked to open it.
Arkadiusz Idzikowski staff commented 2 years ago
@p4k1tz Thank you. We reproduced the problem on our end and it looks like there is a bug in the
hiddenoption, we will take a closer look at that.p4k1tz free commented 2 years ago
@Arkadiusz Idzikowski is there an estimated time to fix?
Also, is there a workaround by listening for sidenavExpanded on init? If so, could you please provide an example?
Arkadiusz Idzikowski staff commented 2 years ago
We can't provide an ETA yet but it should be fixed in the upcoming updates. I'm afraid there is no easy workaround for now because we need to turn off animation on
hiddeninput change, otherwise component will always trigger animation on initialization.