The div is too small for the SVG width

Our web application includes a dynamically generated SVG graphic that sometimes becomes too wide and exceeds the boundaries of the HTML content.

Although the header is set to 100% width, this does not account for the size of the SVG. When inspecting with Firebug, we noticed that the containing element of the SVG is not large enough, causing the HTML page to have a limited view of its actual width. Meanwhile, the SVG itself is much wider.

Is there a way to make sure the containing element expands to fit the entire size of the SVG image?

htmlcsssvg

Answer №1

To find the width, you can extract it using getBBox in this manner: 

$('.yoursvgclassname')[0].getBBox().width;
Execute this within an onload function and adjust the navbar width accordingly.

If you wish to trim: Apply overflow: scroll to your SVG image. This will truncate it at the container's border and include a scrollbar.

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

"Mastering the art of printing wrapped text with Bootstrap to avoid pesky horizontal scrollbars

My issue is quite straightforward. I am trying to display all content on a web browser without the need for a horizontal scrollbar. <div class="container"> <div class="row h-100" style="overflow-y:scroll; padding-left: ...

htmlcsstwitter-bootstrapbootstrap-4blazor

Styling X and Y axis font color in charts using JavaFX 2.x CSS

Is there a way to change the font color of both X and Y axes? In my search through the css reference for fonts, I only found properties like font-size, font-style, and font-weight. font-size, font-style and font-weight I attempted to use -fx-font-color ...

cssfonts

Discover the best method for transferring MySQL data between pages

Can anyone help guide me in the right direction on how to allow a user to click a link within a PHP While Loop generated MySQL table and pass that data to another page? I've searched through similar questions but haven't found a solution that fit ...

javascriptphpjqueryhtmlmysql

Is there a way for me to generate a button that directs users to a variety of pages?

How can I create a button that takes me to a random page on my basic website when clicked? I'm having trouble changing the "href" attribute so that it links to a specific page. This is the JavaScript code I've come up with: document.addEventList ...

javascripthtml

Is there a way to relocate the collapse button to the bottom after it has been clicked?

I have been using Bootstrap to design a expandable card that can be expanded when clicked. I am currently using the collapse feature, but I am facing an issue where the button remains in its original position, whereas I want it to move to the bottom of the ...

jqueryhtmlcsstwitter-bootstrapbootstrap-4

There seems to be a malfunction in the functionality of my Django template navbar

Within my project, I am utilizing two templates named base.html and contact.html. The contact.html template extends the base.html template, and these are the only two templates in use. When I navigate to the blog or about section by clicking on them, the p ...

htmldjangodjango-viewsdjango-urls

HTML5 number input type formats long numbers differently

In my application, users are required to enter a minimum of 15 digits in a number input field. However, if a user enters a longer number, for example, equal to or greater than 19 digits, and then uses the arrow buttons or keyboard keys, the number is auto ...

html

Center text within a dropdown using Bootstrap styling

In a row within my inline form, I have both an email input and a dropdown. However, after resizing the page, the text within the dropdown is no longer positioned correctly (text on the left, arrow on the right). I attempted to fix this by using: text-alig ...

htmlcsstwitter-bootstrapbootstrap-4

Can JavaScript values be passed into CSS styles?

I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it mor ...

javascripthtmlcssdjango

CSS - Adding a Distinctive "Line" to a Navigation Bar

I am attempting to design a unique navbar layout with two "lines". The first line should consist of several links, while the second line would include an HTML select field with a submit button. The following code will generate the desired navbar visual ou ...

css

Animated scrolling does not function properly with external links that are fully qualified

Currently, I am working on the website julebord.bedriftsdesign.no and have added animated scroll functionality to this page: However, I have encountered a problem. The animated scroll works perfectly fine when using internal anchor links like (#myanchor). ...

javascriptjqueryhtmlcsssmooth-scrolling

Building HTML tables with JQuery for handling large datasets of over 4,000 rows and beyond

My goal is to create a table with 4000+ rows and 18 columns displaying parsed pages from my site. I need it all on one page for the following reasons: I require the use of filters in the table I need to be able to sort by more than 5 columns Every cell ...

jqueryhtmlajaxperformancehtml-table

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

javascriptjquerycss

Is there a way to implement a scrolling feature that specifically identifies an h1 element, and subsequently alters the color of said element upon reaching a distinct section?

Currently, my function changes the color to black when the scroll number reaches 100. However, I am looking to target the JavaScript so that it changes the color to black when the scroll reaches a specific section designated by a p tag. My code is almost t ...

javascripthtmlcss

What is the process for transforming a Microsoft Word HTML file into a streamlined XHTML document with inline styles?

Can someone help me with an issue I'm having regarding internal CSS? It seems that Jsoup is not able to parse the @font-face or similar elements. Any ideas on how I can clean up a Microsoft Word HTML document? ...

javacssms-wordhtml-parsingjsoup

Update DIV Background Based on Nearest Radio Selection

Is there a way to make selecting the radio box easier with this code I have? $("div.column43").click(function () { $(this).find('input:radio').attr('checked', true); }); I'm trying to figure out how to change the background and b ...

htmljquerycssradio-buttonborder

What is the best way to create a clickable anchor tag that is nested within a paragraph tag?

Here is the string I am working with: String txtLink = "<p>Apply directly in our <a href=\"https://theorem.applytojob.com/apply/TyJy6YCsOs/Experienced- Backend-Engineer-Ruby?source=GitHub+Jobs\">careers page</a></p>"; ...

javaandroidhtmlparsing

"Searching for the index of a clicked element? Here's how to do

I am trying to determine the index of a clicked anchor element in my navigation using jQuery. However, when I use the following code snippet, I always get zero in the console: $('.navigation ul li a').click(function(e) { e.preventDefault(); ...

javascriptjqueryhtmlcss

Styling for 'checked' state within an ngFor iteration

Each checkbox in my list is assigned to a different department, with each department having its own color. When a box is unchecked, only the border is in the color of the department. When checked, the background changes to the assigned color https://i.ssta ...

htmlcssangularbootstrap-4

The command `browser.find_elements_by_class_name('foo')` returned zero results

I'm encountering an issue with selenium while using Python 3.7. The website I'm working on has a structure similar to this: <html> <body> <div class="foo"> <div class="bar1">some ...

pythonhtmlpython-3.xseleniumselenium-webdriver