What are the steps to insert a plotly graph into a webpage so that it responds to different

I have been working on integrating a plotly pie chart into my website. In order to make the iframe responsive, I decided to utilize this specific tool to generate the necessary html/css. While the chart appears satisfactory on a laptop screen, it is barely visible when viewing it on my phone in portrait mode. How can I adjust the code so that the pie chart is large and clear on any type of screen?

This is the current code being used:

<style>.embed-container { position: relative; padding-bottom: 56.25%;      
height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, 
.embed-container object, .embed-container embed { position: absolute;   
top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>
<iframe frameborder='0' scrolling='no' 
src='//plot.ly/~bluprince13/3.embed?autosize=true&link=false&modebar=false&width=100%'></iframe></div>

View the screenshot for reference here:

htmlcssiframeplotlyresponsive

Answer №1

Regrettably, this is how embed responsive functionality operates... It continues to shrink until there's nothing left... However (while not the most efficient method), I utilized min-width and min-height to stop the size reduction after reaching a certain width... Take a look at this:

Codepen link: https://codepen.io/anon/pen/KZMJER?editors=1100

div {
  min-width: 280px;
  min-height: 280px;
}

Alternatively, you have the option of using Bootstrap's embed-responsive for iframes instead of the CSS code... Just a friendly suggestion...

<div class="embed-responsive embed-responsive-4by3">
  <iframe frameborder='0' scrolling='no' src='//plot.ly/~bluprince13/3.embed?autosize=true&link=false&modebar=false&width=100%' class="embed-responsive-item" style="border:none;" ></iframe>
</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

Leveraging ajax for showcasing page content in a floating div container

I am in need of creating a button on my page that, when clicked, will display a floating div above the page and load another internal page. I believe this can be achieved using Ajax, but I have no experience with it and don't know where to start. Her ...

javascriptcssajax

How can I stop the CSS border of an iframe from flickering and what are some solutions to fix it?

I am encountering an issue with my iframe border when using CSS. The problem arises in Chrome where the border disappears upon resizing the page, while Safari changes the size (Firefox appears unaffected) Are there any known workarounds to fix this? co ...

htmlcssgoogle-chromeiframesafari

When the user clicks, show a designated search result in a separate container

I've been developing my Angular cocktail application, and I've reached a point where I can display all the cocktails in my database (only showing names). Now, I want to implement a feature where if I click on a specific cocktail, its full content ...

javascriptjqueryhtmlangularjs

Is there a way to make text fade in and out smoothly instead of abruptly disappearing and reappearing after an animation ends?

I'm seeking a unique animation effect for my right-to-left scrolling text. Instead of the text teleporting back to its origin at the end of the animation, I would like it to smoothly disappear and reappear from the margins. .custom-animation { he ...

htmlcsscss-animations

The width of the TD element does not affect the grid

<div id="unique-example" class="k-unique-content"> <table id="unique-grid" style="float: left; position: relative"> <thead> <tr> <th width ="410px"data-field="UniqueFileName">Unique File Name ...

htmlcssrazor

Highlighting text in React using hover effects on list elements

Imagine having HTML / JSX structured like this: <ul> <li>First point in list</li> <li>Second point in list</li> </ul> and the goal is to highlight a contiguous range that spans multiple list items: <ul> < ...

javascripthtmlcssreactjstailwind-css

Ways to conceal a child div element without using any specific ID reference

I encountered an issue where I need to conceal all divs within a parent div except the first one. The challenge is that these divs do not possess any unique identifiers. Is there a way to achieve this task using CSS or pure JavaScript? <div role="list ...

javascripthtmlcss

Flexbox causing issues with relative positioning at the bottom of the screen in various browsers

My flex component looks like this: <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" ... width="100%" height="100%" creationComplete="init()"> ....... <components:Naviga ...

javascripthtmlapache-flexflash

Encountered a deployment issue when trying to deploy an HTML application on Heroku due

After uploading an html application on GitHub, I encountered an error while attempting to deploy it on Heroku: No default language could be detected for this app. HINT: This happens when Heroku is unable to automatically determine the buildpack to use f ...

javascripthtmlheroku

Creating an HTML tag from Angular using TypeScript

Looking at the Angular TypeScript code below, I am trying to reference the divisions mentioned in the HTML code posted below using document.getElementById. However, the log statement results in null. Could you please advise on the correct way to reference ...

htmlangulartypescript

Using Handlebars JS to incorporate HTML tags such as <li>, <br>, and more in your data

Is there a way to use handlebars to display a list of data in an unordered format, with "title" and "articles" as the main categories? The issue arises when some of the articles contain HTML tags, such as <a> for links. In my current code, instead of ...

javascriptjqueryhtmlhandlebars.js

Adjusting the size of a bug while hovering over a specific div

Having recently started learning HTML & CSS, I have a question regarding creating a box that scales from 1.0 to 0.8 when hovered over with the mouse. The scaling works perfectly when hovering in the middle (0.0 to 0.8) of the box. However, when hover ...

htmlcsshover

What is the best way to display the elements of an array within an HTML div element?

I've been trying to display the contents of an array in a div container on my HTML file, but I'm stuck. Here's what I currently have: function printArray() { var $container = $('.container'); $container.html(''); ...

javascriptjqueryhtmlarrays

Problem with aligning divs in Bootstrap

I am currently facing a challenge when it comes to aligning my div in Bootstrap 3. My goal is to achieve the following: I have experimented with pull and push commands, but it seems like I still need more practice. Code: <div class="container"> ...

csstwitter-bootstrap-3sidebarcol

Exploring the Various Textures within the CANVAS 2D Context

Exploring new techniques for filling the canvas, I am currently trying to add texture to an object similar to the blobs from the blob example (http://www.blobsallad.se/). The challenge is that the current example is utilizing the 2D context without webGL i ...

htmlcanvaswebgl

Tips for configuring the default appearance of a MaterialUI TextField to mimic the appearance when it is in focus

Hello, I am currently delving into Material UI (ver.5.10.10) for the first time. My goal is to customize the styling of the TextField component in Material UI. Specifically, I want the TextField to always display its focused style, regardless of whether it ...

cssreactjsmaterial-uitextfieldemotion

javascript cannot utilize html reset functionality

My drop down menu includes an onChange event that triggers a JavaScript method. However, when I select a new value and then click the reset button, the dropdown reverts back to its original value but the onChange event does not fire. <select onChange= ...

javascripthtml

Tips for eliminating white spaces when text wraps onto a new line

Imagine having the following code snippet. Essentially, I have a layout that needs to display 'vs prev period' with a percentage in the same line. To achieve this, I utilized display: flex. The issue arises when we require the gap between the tw ...

javascripthtmlcssreactjs

Guide on modifying CSS properties when hovering over the parent element

I am working with a table structure like this: <table> <tr><td class="momdad"><i class='glyphicon glyphicon-cog'></i> Hello </td><td> Mom </td></tr> <tr><td class="momdad">< ...

htmlcss

Is there a method to measure the time it takes to download a script apart from its actual execution time

I am looking to track timing variables for my primary JavaScript load. One approach could be: <script> performance.mark('script-start') </script> <script src="something.js"></script> Later in something.js, inc ...

javascripthtmlperformance