right sidenav has BUG! #1488

Open
mkzaker opened this Issue Jun 7, 2015 · 19 comments

Projects

None yet
@mkzaker
mkzaker commented Jun 7, 2015

Hi,
I need sideNav on right side of screen. i try with this:

class="side-nav fixed right-aligned"

its work but after this:

$(".button-collapse").sideNav({ edge: 'right' });

it get "right: -250px; left: 0px;" attributes

@thomaslarsson

Try 'right' instead of 'right-aligned'. Not a bug.

@FerdinandvHagen

unfortunately I have the same problem. Environment: Opera 29.0 and materializecss 0.96.1 via bower. My sidenav in html:

<ul id="slide-out" class="side-nav fixed right">
    etc...
</ul>

Tested as well without "right" and with "right-align" etc... It's always the same problem. The sideNav sticks to the left side until I resize the window forcing it to go to tablet mode and hiding and then redisplaying the sideNav. Then everything is correct and it is on the right side.

The devtools in my browser show the following difference:
"right-align" class is automatically added (seems legit)
if I just load the page a style tag is added: style="right: -250px; left: 0px;"
after resizing the page (as explained forcing it into tablet mode) style looks like this: style="width: 240px;" which works perfectly fine.

Am I just doing it wrong or is it indeed a bug?

JavaScript looks like this (thats all just some empty AngularJS controller in the background):
$('.button-collapse').sideNav({
edge: 'right', // Choose the horizontal origin
menuWidth: 240
}
);

$(document).ready(function(){
$('ul.tabs').tabs();
});

@FerdinandvHagen

Just added a quick workaround. It's very hacky and the sideNav jumps from the left to the right edge after page load but it works:

var menu_id = $("#"+ $('.button-collapse').attr('data-activates'));
menu_id.css('width', '240px');
menu_id.css('right', '');
menu_id.css('left', '');
@iSuslov
Contributor
iSuslov commented Jun 14, 2015

Guys, I may be wrong, but I think this is already fixed in master. A month ago maybe, I downloaded materialize from their official site, and after found out this bug, fixed it and tried to make pull request. But when I cloned master branch, I've found out that it has this fix already.

@FerdinandvHagen FerdinandvHagen pushed a commit to FerdinandvHagen/materialize that referenced this issue Jun 16, 2015
Ferdinand von Hagen fixed bug of sideNav not working on right side as mentioned in issue #… 908098b
@FerdinandvHagen

Still couldn't get it working. I created a pull request with a solution that is working for me.

@Dogfalo
Owner
Dogfalo commented Jul 3, 2015

This issue has been tested and is fixed.

@Dogfalo Dogfalo closed this Jul 3, 2015
@renefs87
renefs87 commented Aug 4, 2015

I think it is not fixed. It stills happening to me...

@Dogfalo
Owner
Dogfalo commented Aug 4, 2015

I think it is related to angular calling the function many times
On Aug 4, 2015 8:11 AM, "René Fernández" notifications@github.com wrote:

I think it is not fixed. It stills happening to me...


Reply to this email directly or view it on GitHub
#1488 (comment)
.

@zionnite
zionnite commented Aug 5, 2015

i don't think this issue is fixed....
you said something @FerdinandvHagen, but for me when i re-sized my page the side nav button disapper on device and user cant navigate on the site but when i used google chrome to inspect my element i found addition parameter which was "left:-250px

@eresik
eresik commented Oct 6, 2015

Really not fixed!

@brojask
brojask commented Nov 13, 2015

Hi! I had the same problem. I found the way to solve it but is still an issue. Please check the lines number 2006 to 2015 in the JS file for distribution.
Please check this out working: http://codepen.io/bryanrojas/pen/YydLPO

@frankros91

Can confirm this is not fixed. It's hacky but this is how I solved it.
$collapseButton.sideNav({edge: 'right'});
//grab the ul
var menu = React.findDOMNode(this.refs.notificationCenter);
var $menu = window.$(menu);
$menu.removeAttr('style');

@nicolefinnie

We hit the same problem too

  1. side-nav doesn't swap to right, when data-sidenav = "right" is called, until the window gets resized
  2. but it swaps to the left as soon as the condition is met. when data-sidenav = "left" is called
  3. We're still in 0.97.2 due to the grid bugs in 0.97.3 - 0.97.5, it seems this issue hasn't been fixed in the latest version 0.97.5 either, so we don't bother to move up until both issues are fixed.
@gg4u
gg4u commented Jan 3, 2016

I found the solution of @brojask working, and understood the library I m using is correct I was implementing wrongly. It will be useful a clearer use in the documentation.

If you have multiple side-nav bars, you need to specify closing behavior for each of triggering elements like

  $("[data-activates=slide-out-l]").sideNav();
  $("[data-activates=slide-out-r]").sideNav({
    edge: 'right', // Choose the horizontal origin
    closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  });

rather than on class $(".button-collapse").sideNav();.

@brojask
brojask commented Jan 4, 2016

Hi Luigi! For a fast solution you could check this CodePen that I share for
this bug. Actually I didn't patch anything form the source code but I
think it could be better.

I hope this can help you: http://codepen.io/bryanrojas/pen/YydLPO

Greetings, Bryan R.

2016-01-03 8:14 GMT-06:00 Luigi notifications@github.com:

hello and hi @brojask https://github.com/brojask , I've seen indeed
your version is working. Could you please share the patch you did from
lines 2006 to 2015 ? `$(function() {

$("[data-activates=slide-out-l]").sideNav();
$("[data-activates=custom-menu]").sideNav({
edge: 'right'
});
})`

worked only once, at second click it will pop of from left again. I also
noticed that grey background will be layered after multiple openings, a
similar issue to modals background layer.


Reply to this email directly or view it on GitHub
#1488 (comment)
.

@gg4u
gg4u commented Jan 4, 2016

thank you @brojask , I indeed updated my reply. Thank you very much for sharing!

@DantewithZYX

@iSuslov Your commit reference worked for me v0.97.5. Thanks!

@beshambher

Same issue here.

@leolr02
leolr02 commented Jan 5, 2017

The temporary solution is override the css props when the page already loaded
example:
$(function () {
var rightSideNav = $(".button-collapse").attr("data-target");
// Delay 200 ms
setTimeout(function () {
$("#"+rightSideNav).attr("style", "");
}, 200);
});

@Dogfalo Dogfalo reopened this Jan 5, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment