MDL Tab loading Problem

Question

MDL Tab loading Problem

When visiting my website at this link, which is powered by MDL from Google, there is a troublesome issue that occurs. The #harule tab briefly appears before disappearing. This tab should actually be hidden on the page until a user clicks on the harule tab itself. Is there a solution to this problem, either through MDL or utilizing normal HTML, CSS, and JS?

Additional Information: Each individual has their own designated file located within /about/allPeople. For example, you can view /about/allPeople/qualexgaming.php. These files are then included in the main /about/index.php file.

javascript jquery html css

Answer 1

Answer №1

One reason for this is that the tab is built when the page loads and the elements are created before the tab is displayed.

Since the MDL scripts handle the tab generation, a workaround is needed to make it work properly.

To fix this issue, you can add the following style and script tags to your source code:

<style id="tempStyle">#harule{display:none;}</style>
//tab code goes here 
<script>document.addEventListener("DOMContentLoaded", function (event) {
setTimeout(function (e) {
document.getElementById("tempStyle").remove();
}, 1000);
});</script>

Answer 2

One reason for this is that the tab is built when the page loads and the elements are created before the tab is displayed.

Since the MDL scripts handle the tab generation, a workaround is needed to make it work properly.

To fix this issue, you can add the following style and script tags to your source code:

<style id="tempStyle">#harule{display:none;}</style>
//tab code goes here 
<script>document.addEventListener("DOMContentLoaded", function (event) {
setTimeout(function (e) {
document.getElementById("tempStyle").remove();
}, 1000);
});</script>

MDL Tab loading Problem

Answer №1

Similar questions

Tips on adjusting video to the screen size

Unable to utilize Bower due to a node.js malfunction

Achieving functionality with a fixed header

Divide a single array into two separate arrays using React Native

Transforming mp4 or Avi files into m3u8 using only node js

The background image fails to display on the button

Using jQuery to adjust the length of a string to fit within a specific width

Designing a structure with a stationary header, immobile sidebar navigation, and unchanging content using flexbox styling

Unlocking request header field access-control-allow-origin on VueJS

What is the best way to eliminate the white margin that is showing up on the right side of my website?

Testing for packet loss using JavaScript

The dropdown item in Tailwindcss is unexpectedly flying off the edge of the screen rather than appearing directly under the dropdown button

Is there a problem encountered when attempting to pass an array value as a string using props in Vue.js?

Ways to bring GIFs into NextJS

The request's body in the PUT method is void

Deactivating Touchable Opacity Sounds in React Native

When utilizing the vue @submit directive, the FormData object may be found to be devoid

"Troubleshooting the Issue of Unsuccessful Retrieval of Added Row Text Value

What is the best way to bind a model to a directive in Angular.js?

Issue with CSS: Dropdown menu is hidden behind carousel while hovering