1

I'm trying to create an off canvas mobile menu for a website I'm working on which will replace an old buggy version. I've settled on https://github.com/mobify/pikabu as it does everything I need but I'm having a little trouble with it calculating the wrong height.

You can see the issue at: http://verypc.very-dev.co.uk/

You'll need to shrink the menu down, then hit the 'hamburger' at the top left. The menu slides out but you'll notice that you can still scroll the body of the page. The extra height is coming from pikabu and an inline style that it calculates.

My initial thought is that this is something within my CSS that's possibly causing the extra height but I haven't been able to track it down successfully.

I'm trying to avoid editing Pikabu itself but it's not a huge problem to do so if necessary.

Any help would be great!

0Neji
  • 1,038
  • 1
  • 14
  • 36
  • it seems to be consistently 95px more, no matter how high you set the browser.. if you watch during the resize event, '.m-pikabu-overlay' gets set to the correct height.. its only on opening that the menu adds an additional 95px – haxxxton Aug 05 '14 at 07:50

2 Answers2

2

this appears to be a 'feature' of pikabu.. (if you step through the Pikabu.prototype.setHeights function you can see the value being returned for windowHeight is incorrect)

line 514: var windowHeight = this.device.isNewChrome ? window.outerHeight : $(window).height();

window.outerHeight on chrome includes the height of the browser toolbar, address bar etc (~95px)

you will probably need to either remove this line so that it just supplies window.outerHeight or do some better device sniffing so that this only triggers on mobile

haxxxton
  • 6,422
  • 3
  • 27
  • 57
  • 2
    @0Neji, perhaps worth mentioning this issue on pikabu's github? – haxxxton Aug 05 '14 at 08:02
  • 2
    Thanks for the answer @haxxxton, we added that outerHeight calculation because of how Chrome for Android gives height but it looks like we'll need to re-explore that because of Chrome for Desktop. We develop these with a mostly mobile use case in mind so that seems to have slipped through. Definitely going to have this fixed for next version. – kpeatt Aug 06 '14 at 00:27
0

I was fiddling around with Firebug.
In the css when you turn off header { position: fixed; } it seems to pop into the right place (main.css).

I would not use position: fixed/absolute at all in CSS. If you remove those, including the top: 0, right: 0 and height: 50px tags, you clean up your code. It seems to work properly too.

GrayleBV
  • 1
  • 3