problems with sidenav

Oscar Bejarano pro answered 7 years ago

hi, thanks for you answer. whit the new update 4.3.1 the prefix mdb works fine, but the same problem persist. doble navigation problem i just downloaded the package 4.3.1 and tried the example code of you documentation. thanks

Rafał Rogulski free commented 7 years ago

Hi, It's a bug, we will fix it in next release. Regards

Oscar Bejarano pro commented 7 years ago

ok, thanks

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

hi, thanks for you answer. Sorry but the problem persist. If i remove the mdb prefix, it show the styles but no very well, but if i put the mdb prefix, it doesn't have styles.

i updated the angular-cli how show this link https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/commit/cc7aec046967778d6b1fe8b930634ef35ac3e990

Magdalena Obalska free commented 7 years ago

Ok, Oscar, send me your package and we'll check what could go wrong: m.obalska@mdbootstrap.com.

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Ok, that's the code that works for me. Please, try it one more time.

.bg-skin-lp {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}

<mdb-sidenav #sidenav class="sn-bg-1 fixed" [fixed]="true">

<li>
<div class="logo-wrapper waves-light">
<a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a>
</div>
</li>


<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>


<li>
<form class="search-form" role="search">
<div class="form-group waves-light" mdbRippleRadius>
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>


<li>
<ul class="collapsible collapsible-accordion">
<mdb-squeezebox [multiple]="false" aria-multiselectable="false">

<mdb-item>
<mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li>
<li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li>
</ul>
</mdb-item-body>
</mdb-item>

<mdb-item class="no-collase">
<mdb-item-head mdbRippleRadius><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>

<mdb-item>
<mdb-item-head mdbRippleRadius><i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head>
<mdb-item-body>
<ul>
<li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li>
<li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li>
</ul>
</mdb-item-body>
</mdb-item>

<mdb-item class="no-collase">
<mdb-item-head mdbRippleRadius><i class="fa fa-diamond"></i> Simple link 2</mdb-item-head>
<mdb-item-body></mdb-item-body>
</mdb-item>

</mdb-squeezebox>
</ul>
</li>

</mdb-sidenav>

<mdb-navbar SideClass="navbar fixed-top navbar-expand-md scrolling-navbar double-nav" [containerInside]="false">

<div class="float-xs-left">
<a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a>
</div>

<div class="breadcrumb-dn mr-auto">
<p>Material Design for Bootstrap</p>
</div>

<ul class="nav navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a>
</li>
<li class="nav-item dropdown btn-group" dropdown>
<a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
Dropdown
</a>
<div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>

</mdb-navbar>

</header>

<main>
<div class="container-fluid mt-5">
<h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2>
<br>
<h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5>
<h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5>
<div style="height: 2000px"></div>
</div>
</main>

</body>

Please insert min. 20 characters.

Ok, that's the code that works for me. Please, try it one more time. .bg-skin-lp { background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; }


<body class="light-blue-skin bg-skin-lp">
<!--Double navigation-->
<header>

<mdb-sidenav #sidenav class="sn-bg-1 fixed" [fixed]="true">  <li> <div class="logo-wrapper waves-light"> <a href="#"><img src="http://mdbootstrap.com/img/logo/mdb-transparent.png" class="img-fluid flex-center"></a> </div> </li>   <li> <ul class="social"> <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li> <li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li> <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li> <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li> </ul> </li>   <li> <form class="search-form" role="search"> <div class="form-group waves-light" mdbRippleRadius> <input type="text" class="form-control" placeholder="Search"> </div> </form> </li>   <li> <ul class="collapsible collapsible-accordion"> <mdb-squeezebox [multiple]="false" aria-multiselectable="false">  <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right"></i> Collapsible menu</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item>  <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-hand-pointer-o"></i> Simple link</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item>  <mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-eye"></i> Collapsible menu 2</mdb-item-head> <mdb-item-body> <ul> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 1</a></li> <li><a href="#" class="waves-effect" mdbRippleRadius>Link 2</a></li> </ul> </mdb-item-body> </mdb-item>  <mdb-item class="no-collase"> <mdb-item-head mdbRippleRadius><i class="fa fa-diamond"></i> Simple link 2</mdb-item-head> <mdb-item-body></mdb-item-body> </mdb-item> </mdb-squeezebox> </ul> </li>  </mdb-sidenav>   <mdb-navbar SideClass="navbar fixed-top navbar-expand-md scrolling-navbar double-nav" [containerInside]="false">  <div class="float-xs-left"> <a (click)="sidenav.show()" class="button-collapse"><i class="fa fa-bars"></i></a> </div>   <div class="breadcrumb-dn mr-auto"> <p>Material Design for Bootstrap</p> </div>  <ul class="nav navbar-nav nav-flex-icons ml-auto"> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-envelope"></i> <span class="clearfix d-none d-sm-inline-block">Contact</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-comments-o"></i> <span class="clearfix d-none d-sm-inline-block">Support</span></a> </li> <li class="nav-item"> <a class="nav-link waves-light" mdbRippleRadius><i class="fa fa-user"></i> <span class="clearfix d-none d-sm-inline-block">Account</span></a> </li> <li class="nav-item dropdown btn-group" dropdown> <a dropdownToggle type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius> Dropdown </a> <div class="dropdown-menu dropdown-primary dropdown-menu-right" role="menu"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </mdb-navbar>  </header>   <main> <div class="container-fluid mt-5"> <h2>Advanced Double Navigation with fixed SideNav & fixed Navbar:</h2> <br> <h5>1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.</h5> <h5>2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</h5> <div style="height: 2000px"></div> </div> </main>  </body>

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

Hi, I tried with mdb-sidenav but now it's worse, the page lost the style with the mdb prefix. I need to add or configure something for the mdb prefix to work?

stalis pro commented 7 years ago

I had the same problem too

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Yes, as you have noticed now it's necessary to use mdb-sidenav and mdb-navbar instead of sidenav and navbar selectors. We have updated the documentation. Let us know if the example works right now.

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

<p>hi, thanks for you answer, i had use the code in this section</p>
<p><a href="https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n">https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n</a></p>
<p>however , this is the code in app.component.html</p>
<p></p>
<p></p>
<p><br />
<li></p>
<p></a></p>
<p></li><br />
<br />
<br />
<li></p>
<p><li></a></li><br />
<li></a></li><br />
<li></a></li><br />
<li></a></li><br />
</ul><br />
</li><br />
<br />
<br />
<li></p>
<p> </p>
<p> </p>
<p></li><br />
<br />
<br />
<li></p>
<p> </p>
<p>Submit blog</p>
<p><ul><br />
Submit listing</a></li><br />
<li>Registration form</a></li><br />
</ul></p>
<p> </p>
<p>Instruction</p>
<p><ul><br />
<li>For bloggers</a></li><br />
<li>For authors</a></li><br />
</ul></p>
<p> </p>
<p>About</p>
<p><ul><br />
<li>Introduction</a></li><br />
<li>Monthly meetings</a></li><br />
</ul></p>
<p> </p>
<p>Contact me</p>
<p><ul><br />
<li>FAQ</a></li><br />
<li>Write a message</a></li><br />
</ul></p>
<p> </p>
<p></ul><br />
</li><br />
</p>
<p><br />
</p>
<p></p>
<p><a></a></p>
<p><br />
</p>
<p>Material Design for Bootstrap</p>
<p></p>
<p> </p>
<p>Contact</span></a><br />
</li></p>
<p>Support</span></a><br />
</li></p>
<p>Account</span></a><br />
</li></p>
<p> </p>
<p>Dropdown<br />
</a></p>
<p>Action</a><br />
Another action</a><br />
Something else here</a></p>
<p></li><br />
</ul></p>
<p></p>
<p><br />
</p>
<p> </p>
<p>Advanced Double Navigation with hidden SideNav &amp; fixed Navbar:<br />
<br><br />
1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.<br />
2. Fixed navbar. It will always stay visible on the top, even when you scroll down.</p>
<p> </p>
<p></p>
<p> </p>
<p> </p>

Please insert min. 20 characters.

hi, thanks for you answer, i had use the code in this section

https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n

however , this is the code in app.component.html

<li>

</a>

</li>


<li>

</li>


<li>

Submit blog

<ul>
Submit listing</a></li>
<li>Registration form</a></li>
</ul>

Instruction

<ul>
<li>For bloggers</a></li>
<li>For authors</a></li>
</ul>

About

<ul>
<li>Introduction</a></li>
<li>Monthly meetings</a></li>
</ul>

Contact me

<ul>
<li>FAQ</a></li>
<li>Write a message</a></li>
</ul>

</ul>
</li>

<a></a>

Material Design for Bootstrap

Contact</span></a>
</li>

Support</span></a>
</li>

Account</span></a>
</li>

Dropdown
</a>

Action</a>
Another action</a>
Something else here</a>

</li>
</ul>

Advanced Double Navigation with hidden SideNav & fixed Navbar:
<br>
1. Hidden side menu. Click "hamburger" icon in the top left corner to open it.
2. Fixed navbar. It will always stay visible on the top, even when you scroll down.

stalis pro commented 7 years ago

I was following this page too https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n but the hamburger button does not appear. I think this page https://mdbootstrap.com/angular/layout/navigation/#f-s-f-n just got updated to use mdb-sidenav instead of sidenav and mdb-navbar instead of navbar

Add comment

stalis pro answered 7 years ago

0 0 Best answer

Please share the solution because I am having the same problem.

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Ok, Oscar, now I understand what's going wrong, but I still need some code from you - it will be much easier to figure out where's the problem.

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

hi, i updated the angular-cli.json and this fixed some thing but in general, the problem persist. i will give you a link with a video where i show the problem, thanks double navigation problem

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

sorry, can you tell me how update the project to 4.2.1? in my download panel is 4.2.0, thanks

Magdalena Obalska free commented 7 years ago

We will soon equalize to version 4.2.1, with some small npm changes. So for now, start with updating .angular-cli.json, as it's showed here: https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design/commit/cc7aec046967778d6b1fe8b930634ef35ac3e990. If you still have any problems, show me your code, please.

Add comment

Oscar Bejarano pro answered 7 years ago

0 0 Best answer

hi, thanks for you answer, well im using the code in the example in this link https://mdbootstrap.com/angular/advanced/sidenav/#usage i have to say that this issue is present in double navigation too, and im using the last versión of angular pro 4.2.0, thanks

Magdalena Obalska free commented 7 years ago

Ok, so update it to 4.2.1 version, please. And look here once again: https://mdbootstrap.com/support/navbar/.

Oscar Bejarano pro commented 7 years ago

sorry, can you tell me how update the project to 4.2.1? in my download panel is 4.2.0, thanks

Add comment

Magdalena Obalska free answered 7 years ago

0 0 Best answer

Hi, sure, we'll help you. As I mentioned answering your comment in another topic, it's necessary to update your project. Also, make sure that you're using right names with no typos in your code. If it still fails, send me the code that you're using to build your sidenav and we'll see what's going on.

Add comment

Closed

Oscar Bejarano