Scrolling horizontally within SVG graphics

Check out this JSFiddle

body {
    background-color: #111111;
    color: #ffffff;
    /*max-width: 100%;*/
    overflow-x: hidden;
}
.row {
    max-width: 100rem;
}
.svgrow {
    min-width: 70rem;
}
.svgrow svg {
    overflow-x: auto;
}

I am trying to make the SVG horizontally scrollable on small screens without affecting the body's horizontal scrolling. I also want to ensure that only relative units are used.

Despite trying different positions for the overflow property, I have been unable to achieve the desired result. I am using the foundation framework for this project.

htmlcsssvgzurb-foundation

Answer №1

To enable scrolling, ensure that the container has a fixed width. The content (SVG) should have a width larger than the container element. This usually requires specifying a specific width to prevent auto resizing.

.svgrow {
    max-width: 100vw;
    overflow-x: auto;
}
.svgrow svg {
    min-width: 70rem;
}


/* Custom CSS */

body {
overflow-x: hidden;
}
.row {
max-width: 100rem;
}
.svgrow {
    max-width: 100vw;
    overflow-x: auto;
}
.svgrow svg {
    min-width: 70rem;
}
svg {
    margin-bottom: 2.5em;
}
.off-canvas-toolbar {
position: fixed;
height: 100%;
width: 8%;
}
<div class="container">
    <div class="off-canvas position-left" id="sidebar" data-off-canvas>

        

    </div>

    <div class="off-canvas-content" data-off-canvas-content>
        <div class="off-canvas-toolbar">
            <div class="custom-menu-icon" data-toggle="sidebar">
                <i class="fa fa-bars">Icon</i>
            </div>
        </div>

        <div class="row svgrow">
            <div class="small-12 columns">
                <h1>Title</h1>

                <svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2000 1000">
                    <polygon points="0,1000 60,0 2000,0 2000,1000" fill="#fdedbc"></polygon>
                    <polygon points="70,1000 970,0 1800,1000" fill="#7c5b18"></polygon>
                    
                </svg>
            </div>
        </div>
        <div class="row">
            <div id="searchResult" class="small-12 columns" style="">

                <h2 class="center">Search Results</h2>

                <div class="small-12 medium-6 large-4 columns">
                    <div class="searchResult">
                        <div class="caption">
                            Test <span class="creator">by User</span>
                        </div>
                    </div>
                </div>
                <div class="small-12 medium-6 large-4 columns">
                    <div class="searchResult">
                        <div class="caption">
                            Test <span class="creator">by User</span>
                        </div>
                    </div>
                </div>
                <div class="small-12 medium-6 large-4 columns">
                    <div class="searchResult">
                        <div class="caption">
                            Test <span class="creator">by User</span>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        

    </div>
</div>

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

What is the method for adjusting the size of text while rendering on a canvas?

When it comes to scaling text with CSS transform scale, for instance: transform: scale(2, 4); fontSize: 20px // Is including fontSize necessary? I also have the task of displaying the same text on a canvas element. function draw() { const ctx = document ...

javascriptcsshtml5-canvascss-transforms

A guide on implementing input tags through instant search in HTML using AngularJS

As someone new to Angular JS, I am working on adding input tags by clicking from instant search using Angular JS. I came across a helpful example of instant search in action through this demo that Google provided. Now, I want to implement the ability to a ...

htmlangularjsselection

Display email address in a concise manner

Managing user information in my project involves capturing both username and email address. While the username is optional, the email address is mandatory with a maximum length of 100 characters. My issue arises when the email address exceeds 60 character ...

jqueryhtmlcss

Creating a full-width navbar in Bootstrap 4 using the container-fluid

Looking for assistance with making a Bootstrap navbar fill the entire width of a container-fluid using only CSS, as I do not have access to the HTML code. It works outside the container-fluid but can someone help me achieve the same result within the con ...

csstwitter-bootstrapbootstrap-4

Trouble with CSS table background display in Outlook

I am experiencing issues with an HTML table in an email template: <table id="x_formHeaderTable" style="width:100%; margin:0; padding:0; background-color:#FCE68D; border-style: solid; border-color: #000000;"> <tbody> <tr> &l ...

htmlcss

Ways to eliminate the relationship between parent and child

I am attempting to create a design featuring a large circle surrounded by smaller circles. The parent element is the large circle, and the small circles are its children. My goal is for any circle to change color to red when hovered over, but if I hover ov ...

javascripthtmlcss

What is the best way to adjust the width of a column grid header in extjs

When adjusting the width of a vertical header in a grid to 50px, the header text disappears unless manually dragged to the left. How can I ensure the header text remains visible even with a smaller header size? Consider the following code snippet: { text ...

cssextjssassextjs5

Find the ID of the clicked table row using HTML and JavaScript

Currently, I am trying to implement this code snippet: <td align="center"> <div class="dropdown"> <button onclick="DropdownShow(this)" class="btn btn-default glyphicon glyphicon-picture"></button> <div id="@TableR ...

javascripthtml

Customizing the color of cells in an HTML table within a JSON based on their status

Would you like to learn how to customize the color of cells in an HTML table based on the status of a college semester's course map? The table represents all the necessary courses for your major, with green indicating completed courses, yellow for cou ...

javascriptphphtmlmysqljson

Is there a way to view the full HTML source code of this page by selecting the "more" button?

Exploring a web page related to forex trading can be an interesting experience. The website provides a list of live trade records, which can be accessed here: Typically, I use Python along with BeautifulSoup to extract information by reading the source co ...

pythonhtmlparsing

The functionality of images and links is compromised when they are assigned as values to properties within a JSON object

My images and links are not working, even after declaring them globally. When I write the src directly into src, everything seems fine but the alert pops up with the same URL and img src. Can anyone help? var combo0; var combo1; var combo2; var combo3; ...

javascripthtmljsonobjecthyperlink

Submit Button in CKEditor Not Working Without Ajax Submission

Having an issue with the ckeditor. Downloaded the latest version and integrated it into my form like this: <form action="/news.php?frame=edit&amp;id=185" enctype="multipart/form-data" method="post" accept-charset="utf-8"> <textarea class="edi ...

phphtmlckeditor

Bring div button on top of the contenteditable field

I am working on an Angular app for a client and need to implement a clickable button at the bottom right of a contenteditable element, similar to the image shown below : https://i.sstatic.net/J6XdW.png The challenge is that the content needs to be scroll ...

javascripthtmlcssangularjscontenteditable

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

Utilizing the package https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props to create a "border" effect around images based on progress has presented a challenge. Specifically, achieving a gradient color for the border when i ...

javascripthtmlcssvue.js

Crafting web design with media queries to ensure responsiveness

I have been working on creating a responsive webpage. While the header and footer are resizing properly when the browser is reduced in size, the navigation section is not behaving the same way. Currently, shrinking the page is causing the navigation block ...

htmlcss

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

"Encountering a Challenge: Cannot Assign Array to ngFor Directive in Ionic App, Displaying

I have encountered an issue while fetching product categories using API. The problem lies in the fact that the categories are being retrieved as an object instead of an Array which is required for *ngFor to work in Ionic. Any assistance on how to define th ...

htmlangularionic-frameworkionic3

Tips for modifying style.display using JavaScript

On my website, the menu is structured like this: <nav id="menu"> <label for="tm" id="toggle-menu">Menu <span class="drop-icon">▾</span></label> <input type="checkbo ...

javascriptphphtmlcss

retrieve the value of a textarea element from an HTML table

Is there a way to extract data from a nested table's textarea using the row index? I attempted the following code snippet but it did not work. var note = document.getElementById($index).cells[3]; var y = document.getElementsByTagName("textarea").valu ...

javascripthtmlangularjs

Concatenate a variable to the conclusion of a string using PHP

Currently, I am trying to include the id of the logged-in user in a table name. For instance, I would like to have a table named Rating_User_1 where 1 corresponds to the id of the user who is currently logged in. I have stored the user's id in a varia ...

phphtmllaravel