Unable to scroll on the initial page of mobile phone as the scroll bar is missing; refreshing the page resolves the issue

I recently added a small JS code to my original website to implement a new feature. Everything seemed to be working fine, but I noticed that when the page is first loaded, there is no scroll bar. However, if I refresh the page, the scroll bar appears. I tried adjusting the 'height' parameter, but it didn't solve the issue.

Code Snippet: 

<heyflow flow-id="erp-berater-anzeige" height="2000" width="100%" pass-parameters scroll-up-on-navigation></heyflow>

View the page here:

Note: I have limited coding knowledge

javascripthtmlcsswordpress

Answer №1

My suggestion would be to start by including a CSS file or <style> tag in your main index file. Within this file, make sure to include the following code:

body{
overflow: visible; !important
}

This will help ensure there are no issues with scrollbars on the site. It's best to avoid using hardcoded values like setting the body height to 2000px.

Another helpful tip is to divide your site into separate sections using 

<section> your code </section>
. Give each section a style of height: 100vh; and make sure your JavaScript file loads within one of these sections. By doing this, each section will fill the full height of the display (100vh = 100 view height), making your site easier to manage.

Cheers!

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

Move the scroll bar outside of the div and set it to automatically overflow

My issue involves a small div with the CSS property overflow:auto;. However, when the scroll bar appears, it covers up a significant portion of the div. One possible solution is to use overflow:scroll;, but this can result in an unsightly faded scroll bar ...

htmlcss

Mixing up jQuery's Deferred, jsDeferred, and the concept of deferring in coding can be a common source of confusion

I recently downloaded a library called jsdeferred in hopes of resolving some code-flow issues I've been facing. However, I'm finding the examples and documentation to be a bit unclear. In my quest for clarity, I also discovered that jQuery offers ...

javascriptjqueryjquery-deferred

Creating a function in a JavaScript module that can be exported to the window namespace

One of the goals of modules is to protect variables and functions defined inside from being accessed outside the script. However, if you want to export a specific function for global use, there are ways to accomplish this. Merely assigning it to the window ...

javascriptes6-modules

Transforming the unmanaged value state of Select into a controlled one by altering the component

I am currently working on creating an edit form to update data from a database based on its ID. Here is the code snippet I have been using: import React, {FormEvent, useEffect, useState} from "react"; import TextField from "@material ...

javascriptreactjstypescriptmaterial-ui

Strip all textual content from within HTML div elements while retaining the original HTML tags and formatting

I currently have the following HTML code: <div> Here <a href="#"> is </a> <p> Text, that I want to </p> be removed </div> This is what I desire: <div> <a href="#"> </a> <p& ...

javascriptjqueryhtmldom

Update the content inside the extension by modifying its innerHTML

Just starting out with JavaScript, I'm attempting to create a basic extension that can generate a random number. document.getElementById("submit").onclick = function() { a = document.getElementById("in1").value; b = document.getElementById("in2 ...

javascripthtmljsongoogle-chrome-extensioninnerhtml

Combining two RxJs observables to create selectable options for a material drop-down menu

I'm encountering issues while attempting to combine two different observables and display the results in a Material Select component. This example (created using the Material docs tool) demonstrates what I'm trying to achieve. However, the optio ...

javascriptangulartypescriptrxjs

Integrating a dynamically created DOM node from JavaScript into a Vue component using Vue render functions

Is it possible to pass a JavaScript function that returns a DOM node representing a tree view with nested nodes into the Vue render function? I am aware that directly manipulating the DOM is not recommended in Vue, and using a recursive template would be ...

javascriptobjectvue.jsdomvue-render-function

Creating a dynamic sidebar navigation that adapts seamlessly across all devices, including desktop and mobile platforms

I am currently using Bootstrap 5 to design a resume webpage. While I have achieved the desired look, I am facing an issue with making the sidebar fixed without overlapping other content when the page is resized to be smaller. Initially, I attempted to use ...

htmlflexboxbootstrap-5sidebarfluid-layout

Tips on placing two tags within one cell in a HTML Bootstrap table

I am a beginner in html and bootstrap, and I am trying to create a table. However, I noticed that the input fields are not aligning properly within the cells. Even when I tried adjusting the width to 100%, the % sign ended up on a separate row. Can anyone ...

htmlcssformsbootstrap-4

Unable to resize icons within bar-footer

My footer has a bar: <div class="crop modal"> <div class="crop-center-container"> <div class="crop-img" ng-style="{width: width + 'px', height: height + 'px'}"></div> </div> <div cla ...

htmlcssionic-framework

Passing parameters in a jQuery function through a button click

I am trying to figure out how to pass the @item.Id value as a parameter in the click function for a button. Here is the code snippet: <button id="buttonEdit" style="color:darkgreen" data-toggle="modal" data-target="#Ed ...

javascripthtmljquerycssmodel-view-controller

"Optimize your website by incorporating lazy loading for images with IntersectionObserver for enhanced performance

How can I use the Intersection Observer to load an H2 tag only when the image is visible on the page? Here is the JavaScript code I currently have: const images = document.querySelectorAll('img[data-src]'); const observer = new IntersectionObser ...

javascripthtmlintersection-observer

Tips for updating checked checkboxes in a php mysql database

When submitting an HTML form with a selected checkbox, update the values of the selected checkboxes in a MySQL database. For example: update enquires set status = '2' where id in (selected checkbox values) View the screenshot of the checkbox Vi ...

javascriptphpmysql

Exploring Angular: Looping through an Array of Objects

How can I extract and display values from a JSON object in a loop without using the keyValue pipe? Specifically, I am trying to access the "student2" data and display the name associated with it. Any suggestions on how to achieve this? Thank you for any h ...

javascriptangularjstypescript

The application experiences crashes when the tablet is rotated, happening while in the development stage

For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...

javascriptandroidhtmlcsscordova

Having trouble getting SVG animations to work properly when using the static folder in Parcel?

As I was attempting to display my SVG file on the browser after uploading it to my domain, I followed a similar process to other projects where I had installed parcel. This involved creating a static folder and placing the SVG file inside it. While the SVG ...

javascriptanimationsvgnpmstatic

Is the Order of a JSON Array Dependable?

When working with JSON, it's clear that relying on the ordering of key-value pairs may not be reliable. For instance, a JSON parser could interpret { "someKey" : "someValue", "anotherKey" : "anotherValue", "evenAnotherKey" : "evenAnotherV ...

javascriptjson

Building and connecting div containers in HTML

I am looking to display two div tags (div1 and div2) side by side on a single HTML page. In div1, I want to include 2 anchor tags (Create and Insert). For div2, I aim to create 2 tab divs (tab1 and tab2). The goal is to link the Create anchor to tab1 and t ...

javascripthtmlcss

How can I confirm if a class is an instance of a function-defined class?

I have been attempting to export a class that is defined within a function. In my attempts, I decided to declare the class export in the following way: export declare class GameCameraComponent extends GameObject { isMainCamera: boolean; } export abstra ...

javascripttypescript