Issue with auto height calculation occurs when element is initially hidden upon DOM load but is later displayed

Currently, I am facing an issue with an SVG that has a CSS width of 100% and height of 100%. The wrapping element spans the entire width of the screen while its height is set to auto. It's important to note that the wrap div determines the dimensions of the SVG.

Here is an example setup:

<div id="svg-wrap" style="width: 100%; height: auto;">
    <svg style="width: 100%; height: 100%;"></svg>
</div>

The problem arises when I load the page with these elements hidden (display: none). This seems to disrupt the height calculation when the elements are displayed after the DOM is ready. As a result, the dimensions of the SVG can get skewed, turning into something like 1024px wide x 25px high instead of the expected 500px high.

My assumption is that hiding objects prevents proper width calculations, impacting auto heights in the process. Is there something I'm missing here? What would be the workaround for this situation?

javascriptjqueryhtmlcsssvg

Answer №1

Swap out display:none; with visibility:hidden; and your problem is solved!

The difference between using display:none; and visibility:hidden; is that the former completely removes the object from the layout, while the latter simply hides it from the user's eyes.

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

transforming a div to behave similarly to an iframe

I am trying to load content from my page into a div element using the following function: function loadmypage(DIV, pageURL) { var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } e ...

javascriptajaxiframehtml

Utilizing JQuery to differentiate a single element within a group of elements

As a beginner in the world of jquery, I am attempting to assign a font awesome icon star (fa-star) to differentiate between admins and regular members within the group members bar. The usernames have been blurred out for privacy reasons, but my goal is to ...

javascriptjqueryhtmlcss

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

javascriptcssbootstrap-4aurelia

Executing a CRM javascript button triggers a request to a JSON URL and extracts a specific value

My current task involves creating a button in JavaScript due to system limitations preventing the use of HTML. This button should navigate to a specific URL (REST API to retrieve a JSON file). Furthermore, upon clicking the button, I aim to display an aler ...

javascriptjqueryjsonapicrm

Can you point me to the location where the 'req' parameter is specified?

I've been exploring a new authentication approach detailed in this article. One issue I'm encountering is locating where the req parameter is declared in the snippet below. It seems like my code won't compile because this parameter isn&apos ...

javascriptangulartypescript

Tips for delivering a heartfelt message when a user adds an item

import React from 'react'; import { useForm } from "react-hook-form"; import { toast } from 'react-toastify'; const AddStorage = () => { const { register, handleSubmit } = useForm(); const submitData = data => ...

javascriptreactjsreact-hooksreact-toastify

Tips for aligning input fields in a single row within an HTML card

Is there a way to arrange Quarter and Month in the same row, and Week and Date in a row below? <base target="_top"> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR ...

htmlbootstrap-4

In AngularJS, how can you filter the ng-repeat value by clicking on a checkbox field?

Hey there, I'm looking to filter the ng-repeat value when a checkbox is clicked. Check out my Plunker here. By checking the checkbox labeled Role block, it should only show elements with roles value of "block". Similarly, by checking the checkbo ...

htmlangularjsmeanjs

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

Is it possible for me to nest a Firebase collection within another collection?

When gathering user information and favorite foods in a form, I'd like the favorite food data to be nested under the 'users' collection as Likes: const sendPosts = (e) => { e.preventDefault() db.collection("users").add({ ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestore

Error: Unable to assign value 'auto' to property of null object

Whenever I attempt to update my MongoDB using AngularJS on the front end and Node.js on the backend, I encounter a `TypeError: Cannot set property 'auto' of null error. Here is the code snippet that resulted in this issue: AngularJS Code: scope ...

javascriptangularjsnode.jsmongodbexpress

Text displayed in Ajax tab container is not accurate

My website features an ajaxToolKit:TabContainer with a total of three tabs that are populated by each Product in some capacity (Description, Additional Information, Reviews). Additionally, there are three other tabs that are dynamically generated and added ...

c#htmlasp.netajaxtabs

Conditionals are always evaluated as true

After writing this post function in my jQuery plugin, I encountered a peculiar issue. I have a doubt about the condition statement in this jQuery code. Can you confirm if it is correct? if(info = "enabled"){ $("#mod"+mod_id+" > img.status").attr(" ...

phpjquery

The Bootstrap Modal containing a JQuery Validation Form refuses to submit even after successful validation

UPDATE: To provide some context for the question, I have created another Fiddle that showcases the same form outside of the modal. Under the right conditions, such as entering an email address and clicking the Get Started button, the form submits correct ...

javascriptphpjquerybootstrap-4jquery-validate

Struggling to incorporate blocks into Jade for Express. Encountering errors like "Max Stack Size Exceeded" and issues with setHeader

I am currently using Express along with a simple express-generator server that I created. My first task was to focus on creating the view layout and extending the index page, but unfortunately, I have encountered some challenges. Throughout my process, I& ...

javascriptnode.jsexpresspug

Generating a random selection of files from a directory and distributing them randomly

In an attempt to create a command for my Discord.js bot that selects a random image from a folder and sends it, I am facing an issue. The array containing the images cannot be set manually due to the constantly changing number of images in the folder. The ...

javascriptarraysnode.jsdiscord.js

Creating an uncomplicated selector bar for a basic javascript slideshow

I've spent the last couple of hours teaching myself some basic JavaScript, so please bear with me. Currently, I have a simple code in place for a straightforward slideshow on a website. Here is the JavaScript I'm using (where the 'slide&apo ...

javascriptcss

Swipe JS: tap on the edge to view the next item

Currently utilizing Swipe JS to generate a full-screen image gallery and aiming to incorporate the functionality of clicking on the left or right edge to navigate between the previous and next slides. An attempt was made to create absolutely positioned a ...

javascriptswipe.js

AngularJS - Implementing a sliding down menu feature with the ng-click directive

Is there a way to modify my menu button so that it slides down and up when clicked, instead of just showing and hiding? HTML: <div class="nav"> <nav class="primary-nav" ng-show="showMenu" ng-class="{true: 'showMenu'}[showMenu]"> ...

angularjscssangularjs-scopeng-class

Processing JSON data of a quotation that is enclosed within double quotation marks

My value is a string: "['Eitaj', 'Jason Json', 'Eitaj M', "Jason Json's"]" Trying to parse it with JSON.parse() results in an error. Encountered SyntaxError: Unexpected token ' in JSON at position 1 I discovere ...

javascriptjson