DIV is unable to detect SVG elements inside it

What could be causing the <div> not to automatically adjust its height based on the inner <svg> element in this particular situation?

CSS

#curve-svg {
  height: auto;
  max-width: 400px;
  position: relative;
  border: 1px solid red;

  svg {
    position: absolute;
    width: 100%;
    max-width: 400px;
    height: auto;
  }
}

HTML

<div class="pure-u-1" id="curve-svg">
  <svg id="svg" width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">

    <path id="curve" style="fill:none;stroke-width:0.35px;stroke:#333;" d="blah" blah blah/>
  </svg>
</div>

I am utilizing PURE.css, but so far I haven't come across anything that would hinder the div from expanding to fit the content; this issue has also been observed with both Bootstrap 3 and Bootstrap 4.

Any assistance or recommendations would be greatly appreciated!

htmlcsssag

Answer №1

The reason for this issue is the use of the height="100%" attribute on the svg element. You should assign a specific height value (such as in pixels) to resolve this problem. Once you do that, the sizing will be correct. Check out this example for reference.

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

It is impossible for 4 div elements to align in a horizontal position

Having an issue where I am trying to align 4 boxes horizontally like cards, but they are appearing in a staircase formation instead. Any help would be appreciated. I have provided the code with the issue on this jsfiddle link #first { ...

htmlcssflexbox

I want to adjust the size of a <div> element as an image is being resized using Bootstrap's "img-responsive" class

When adjusting the browser size, the images are resized which is great because it's exactly what I intended. However, the lower part of the black area does not resize accordingly. This results in a black area appearing under the images when viewed on ...

jqueryhtmlcsstwitter-bootstrapbxslider

Adjust the size using padding alone

My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px. When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes ...

csshtml-lists

Bootstrap: Retrieve an image from a modal

I am working on a modal that contains a variety of selectable images. When an image is clicked, I want to change the text of the button in the modal to display the name of the selected image. Additionally, I would like to grab the selected image and displa ...

javascripthtmldjangotwitter-bootstrap

Can anyone guide me on saving an array to local storage, retrieving its contents, and populating them into a select element?

I have written code to retrieve an array and add its elements to a select object. Check it out: var select = document.getElementById('select'); var theArray = localStorage.getItem("array") JSON.parse(theArray) if (theArray != null){ f ...

javascripthtmldom

I need assistance in validating and processing an HTML form that takes input from a UI login interface while utilizing the Fiber framework in the Go programming language

Can you assist me in capturing input data using the Fiber Golang framework? <form action="/" method="POST" novalidate> <div> <p><label>Email Address:</label></p> <p><inp ...

htmlnode.jsjsongogo-fiber

What is the correct way to utilize the submit() function within this specific form?

I have a small registration form that requires validation before submission. In order to achieve this, I've developed a JavaScript function as shown below: var name = document.getElementById('name').value; var company = document.getElem ...

javascriptjqueryhtmlformsvalidation

The line breaks in elements occur when the combined widths add up to 100%

Is there a way to display an input and a button inline, with the input taking up 70% of the row and the button taking up 30%? I tried setting the CSS for the input to 70% and the button to 30%, but they keep breaking onto separate lines. How can I solve ...

css

ngSanitize continues to present plain text rather than rendering HTML code

When working with AngularJS scope, I encountered the need to display certain items as HTML. After some research, I realized that integrating ngSanitize was necessary for this functionality. Here is how I implemented it in my app: <script src="Scripts/a ...

javascripthtmlangularjs

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

Connecting click events to multiple items, without the need for multiple functions

I'm struggling with the efficiency of my Javascript and I believe there must be a better way to achieve my goal. To demonstrate my issue, I've created a simplified version of my project on JSFiddle. JSFiddle The main objective is to display inf ...

javascriptjqueryhtmlcss

The issue with the datatable row button functionality is not functioning as expected within the

I am facing an issue with my Jade Template code where I am trying to trigger a JavaScript function when a button is clicked on each row. Despite following the documentation for DataTables and Jade, I am unable to figure out what mistake I am making. It see ...

javascripthtmlnode.jspug

Quick trick to strip decimal points from prices with jquery

Is there a way to remove the decimal point from the price on my website? This is what my HTML looks like: <span id="product-price-4432" data-price-amount="399" data-price-type="finalPrice" class="price-wrapper " itemprop="price"> <span class="p ...

jqueryhtmlrounding

Unable to update meta tags in index.html on GitHub Pages using create-react-app (CRA)

When using GitHub Pages, it overrides my create-react-app's index.html with its own file. The original index.html includes important meta tags, but GitHub's version does not. Unfortunately, I am unable to modify the metadata of GitHub's in ...

htmlreactjsmetadatacreate-react-appgithub-pages

Google Chrome Failing to Display Fonts Correctly

There's a strange issue I'm facing with Chrome. I've integrated Bootstrap with glyphicons and another font (BYekan) using @font-face. Sometimes the glyphicons and BYekan fonts display correctly, but other times a square appears in place of ...

cssgoogle-chrometwitter-bootstrapfontswebfonts

Activate a button utilizing jQuery keyboard functionality

Here is what I have accomplished so far: http://jsfiddle.net/qEKfg/ I have created two buttons that activate on click and resemble keyboard keys. My goal is to make them animate only when the corresponding keys (CTRL and ...

javascriptjqueryhtmlbuttonkeyboard

Play around with my design

I'm having trouble with my styling and need some assistance. Specifically, I want to make sure that my page_content_div appears under my header instead of below the right and left carousel controls. I tried using float:left on the page_content_div, bu ...

css

Utilizing Reveal and Interchange for an Adaptive Lightbox in Foundation 4

Can Foundation 4 Reveal be used with images in a way that they are only loaded when the user clicks an element to open the modal? My objective is to create an Adaptive Lightbox using Interchange. When a user clicks on a thumbnail, it should display an ima ...

csszurb-foundationadaptive-design

Rearrange items vertically using Flexbox

Struggling to stack two items vertically using flexbox. Tried setting order number but nothing happened. Need .trail-title below .trail-items. Any tips on how to rearrange them vertically with flexbox? Check out my JSFiddle: https://jsfiddle.net/tb1sv7n ...

htmlcssflexboxvertical-alignment