Pikabu's Uphill Battle with Heights

I'm currently in the process of developing a new off canvas mobile menu for a website project to replace an outdated and faulty version. After some research, I have decided to use https://github.com/mobify/pikabu as it meets all my requirements. However, I am facing an issue with its height calculation.

The problem can be observed at:

To replicate the issue, simply shrink the menu, then click the 'hamburger' icon at the top left corner. The menu slides out, but you will notice that the body of the page is still scrollable due to incorrect height calculation by pikabu and an inline style.

Initially, I suspected that the extra height may be caused by a CSS conflict within my stylesheet, but I have been unsuccessful in identifying the root cause.

While I prefer not to make direct edits to Pikabu itself, I am willing to do so if necessary to resolve this issue.

Any assistance or guidance on this matter would be highly appreciated!

javascriptjquerycss

Answer №1

It seems that there is a unique 'feature' within Pikabu where the Pikabu.prototype.setHeights function returns an incorrect value for windowHeight when stepped through.

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

In Chrome, window.outerHeight includes the browser toolbar, address bar, and other elements (~95px).

You may need to consider either removing this line so it only utilizes window.outerHeight, or implement more precise device detection so it only affects mobile devices.

Answer №2

Playing around with Firebug led me to an interesting discovery.
When I disabled the line header { position: fixed; } in the CSS file, the layout seemed to magically fall into place (main.css).

I personally steer clear of using position: fixed/absolute in CSS. By eliminating those properties, such as top: 0, right: 0, and height: 50px, you can greatly simplify your code without sacrificing functionality. It appears to function just fine without them.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Loading routes directly in Angular 2

I've encountered an issue with my Angular application where navigating to certain routes results in an error. The two routes in question are: http://localhost:8080/ /* Landing page */ http://localhost:8080/details/:id /* Result page */ For instance, ...

javascriptangularangular-routing

Six Material-UI TextFields sharing a single label

Is there a way to create 6 MUI TextField components for entering 6 numbers separated by dots, all enclosed within one common label 'Code Number' inside a single FormControl? The issue here is that the label currently appears only in the first tex ...

javascriptreactjstypescriptmaterial-ui

I am looking to implement a straightforward drag-and-drop feature using jQuery

Is it possible to drag and select 4 buttons in a browser, similar to how you would do on Windows, using jQuery locally? ...

javascriptjquery

Using jQuery to target a specific HTML element by its ID, not requesting the entire webpage

Currently, I am attempting to utilize jQuery ajax to fetch a project page. In this scenario, the xhr variable is expected to hold the correct string to the webpage (the target page). I have set up a condition to prevent the page from loading as a mobile v ...

javascriptjqueryajaxjquery-get

The positioning of sub-menu items is incorrect

I would like the subitems in the menu to be positioned directly under the main menu items instead of being slightly offset to the right. CSS ul#menu { float:left; width:100%; margin:0; padding:0; list-style-type:none; background-c ...

css

Tips for avoiding unnecessary re-renders when using a functional component and react hooks:

Problem: When a user enters a room code in the input field, the web application re-renders, causing the socket to disconnect and reconnect. Scenario: I am developing a multiplayer game using technologies like Socket.io, React, Express, PostgreSql, and Nod ...

javascriptreactjsreact-hooksrender

Invalid PDF File - Unable to Complete Download via $http

I'm facing an issue while attempting to download a PDF file using the $http service in AngularJS. Upon trying to open the downloaded file, I encounter an error message stating "Invalid Color Space" and the page appears blank. To troubleshoot this pr ...

javascriptangularjsajaxhttp

Implementing a progress loader in percentage by simultaneously running an asynchronous setTimeout counter alongside a Promise.all() operation

I'm encountering a problem running an asynchronous setTimeout counter simultaneously with a Promise.all() handler to display a progress loader in percentage. Here are the specifics: I've developed a Vue application comprised of three components ...

javascriptvue.jsasynchronousvuejs2async-await

Power Punch - Interactive Click Functionality

My question pertains to the click binding in Knockout and a specific behavior that I have observed. While there are numerous questions about click bindings on this platform, none seem to address the behavior I am encountering. I have grasped that in Knock ...

javascriptknockout.jsdata-binding

The hiding/showing of elements is not being executed correctly by jQuery

My web template includes HTML and jQuery code for a project I'm working on. During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning". The code properly ...

javascriptjqueryhtmlcss

How can I customize the appearance of a specific tagged page on my Tumblr blog?

Although I have a solid grasp of HTML & CSS, I am encountering some difficulties with the Tag Page feature on Tumblr. Specifically, I want to change the heading displayed on the /tagged/vld tag page without altering the URL. Currently, the heading is gener ...

javascripthtmlcsstumblr

What is the best way to pull out every Monday and every other Monday within a specific timeframe using PHP?

I'm currently utilizing the widely known jQuery UI's Datepicker for a form where I choose a range of two dates. The first date chosen signifies the starting date, while the second represents the end date. Now, I am in need of an algorithm, some ...

phpjqueryalgorithmdatepickerdate-range

Executing multiple asynchronous calls in parallel in Node.js, with the ability to prioritize their

Imagine using Node.js to execute two asynchronous calls in order to retrieve some information. You could utilize the async package, where you simply pass two functions and an optional callback. async.parallel([fun1(){callback(null,1);}, fun2(){callback(nu ...

javascriptnode.jsasynchronousparallels

Query in progress while window is about to close

I'm attempting to trigger a post query when the user exits the page. Here's the code snippet I am currently working with: <script type="text/javascript> window.onbeforeunload = function(){ var used = $('#identifier').val(); ...

javascriptjqueryonbeforeunload

Optimizing Your CSS Loading Process for Production Environments

Lately, I've been loading a lot of JS and CSS files in my project. In an effort to boost my site's performance, I decided to use YUICompression integrated with Ant build. After each project build, it automatically creates a minified file by appen ...

javascriptcssantminifyyui-compressor

Utilize Materialize css with Aurelia for dynamic styling

Looking to incorporate a Materialize CSS select dropdown in the template file order.html. The code snippet is as follows: <div class="row"> <div class="input-field col s12"> <select multiple> <option value="" dis ...

javascriptjqueryaurelia

The problematic max-width with srcset attribute

Here's the HTML markup I'm working with: <picture> <source srcset="img/home-page/placeholders/placeholder_2560.jpg" media="(max-width: 2560px)"> <source srcset="img/home-page/placeholders/placeh ...

htmlcsssrcset

Dragging Three.js points

In need of help with generating a large number of draggable objects that are limited to a plane form such as rectangles or circles. Initially, I used simple CircleGeometries placed inside another geometry (plane) for easy dragging, but performance suffered ...

javascriptthree.jsparticle-system

Ways to conceal a covering that reveals itself on its own accord

Can anyone assist me with automatically hiding an element and then having it reappear within a few seconds using jQuery? ...

jquery

If you invoke revokeObjectURL, Chrome will fail to display Blob images

-----update------ After some investigation, I found that commenting out window.URL.revokeObjectURL( imgSrc ); fixed the issue in all browsers. It seems like Chrome was revoking the URL too early. I am curious to understand why this behavior occurs, and if ...

javascriptajaximagecgiblob