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: https://i.sstatic.net/Z0Lm4.jpg

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

Why isn't the class applying the color to the Angular span element?

My Angular application generates text that needs to be dynamically colorized. To achieve this, I inject a span element with a specific class into the text output like so: Some text <span class="failResult">that's emphasized</span> and oth ...

htmlcssangular

Develop a straightforward static webpage and set it up by installing and launching it using NPM

I am attempting to craft a straightforward HTML page that incorporates CSS/JS and utilizes npm. The objective is to construct a basic page that can be accessed by simply using "npm install" and "npm start". As an example, I will design a page with HTML, ...

htmlnode.jsnpmvue.js

What is the best way to automatically close a modal window after pressing the submit button

Having some trouble with my modal window using pure CSS. Can't seem to get it to disappear after clicking the submit button. Any suggestions on how to hide it properly? Here is the code snippet of both the HTML and CSS for reference. Open to all ideas ...

htmlcss

The flying saucer fails to display images when viewing PDFs

Having some trouble converting HTML to PDF as the images in the HTML are not showing up in the PDF file. pom.xml <dependency> <groupId>org.xhtmlrenderer</groupId> <artifactId>flying-saucer-core</artifactId> <v ...

javahtmlhtml-to-pdfflying-saucer

What is the best way to transfer information to a different NextJS page?

I want to implement a search input field. The idea is to allow the user to type something into the search bar and then send that input to another page where an API request will be made with the search content. Essentially, when the user types "something" ...

javascripthtmlnext.js

Is it possible to accomplish this straightforward task using PHP?

Essentially, my goal is to have the content inside the h1 tag duplicated in the h2 tag as well. Take a look at the example provided below. <!DOCTYPE html> <html> <body> <h1>The content here should also appear in the H2 tag.</h1 ...

phphtmlcss

Tips for indicating errors in fields that have not been "interacted with" when submitting

My Angular login uses a reactive form: public form = this.fb.group({ email: ['', [Validators.required, Validators.email]], name: ['', [Validators.required]], }); Upon clicking submit, the following actions are performed: ...

htmlangularangular-reactive-forms

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

csswordpress

PHP: Dynamically update div content upon submission

I am attempting to update the "refresh" div after clicking the Submit button and also at regular intervals of 5 seconds. Despite looking through various resources, I have not been able to find a solution that meets my requirements. <script src="h ...

javascriptphpjqueryhtml

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to ...

jqueryhtmlcssanimation

Graph is vanishing while linked

A unique HTML canvas is included in a standalone file called dashboard.html. To display the dashboard on the main homepage (home.html), we utilize ng-view nested within an ng-if directive. Oddly, clicking on the hyperlink "#" from the home page causes th ...

javascripthtmlcssangularjschart.js

Is it possible to incorporate a label within a dropdown menu (<select>)?

How can I add a label inside a select box using Bootstrap? Here is an example: Before selecting an option After selecting an option, the label should appear in a small size like this: After selecting an option : <div class="form-group"> & ...

javascripthtmlcssbootstrap-4

What is the best way to implement data loading on scroll in HTML with AngularJS?

I'm working with a HTML Dynamic Table <div class="clearfix reportWrapper" > <div class="reportTable"> <table class="table table-bordered footerBGColor"> <thead fix-head class="headerTable"> ...

javascripthtmlangularjs

Leverage the power of JavaScript validation combined with jQuery

Hello, I'm relatively new to the world of Javascript and jQuery. My goal is to create a suggestion box that opens when a user clicks on a specific button or div element. This box should only be visible to logged-in users. I have some knowledge on how ...

javascriptc#jqueryhtmlasp.net

Clicking on the title link will open the content in an iframe, but the image

Having trouble with a previous post but I've created a codepen to illustrate the issue. Hoping someone can help me out! Check out the codepen here: "https://codepen.io/Lossmann/pen/GRrXyQY" ...

javascripthtmlcss

Issue with the appearance of the footer in my Wordpress template

After creating a WordPress template, I noticed that the footer is not extending to 100% width as expected. Check out the page here Any suggestions on why this might be happening? Could it be due to a missing closing div tag somewhere in the code? Thank ...

csswordpress

How to set up a multi-select box for tagging purposes

I tried to implement a multi select box to create tags using the code below. I downloaded select2.min.css and select2.min.js from https://github.com/select2/select2, then copied them into the project's css and js folders. Here is the HTML code snippe ...

javascripthtmlcsstwitter-bootstrap

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

I am in need of a navigation section that is always visible on all devices, with a collapsible toggle aligned to the right. In Bootstrap 5.2, if I place the collapse toggle after the <div class="collapse navbar-collapse ..., the collapsible conten ...

htmlcssnavbarbootstrap-5markup

Transferring information from an HTML page to a PHP script

I am facing a dilemma with my current PHP script that is called from an HTML link. The setup requires the script to accept non-user input from the page, specifically static data already present. The line calling the script appears like this. <div class ...

phphtmlajaxforms

A layout featuring a grid of 3 rows and 2 columns, each containing 6

Is there a more effective method to construct this 3x2 "table" using DIVS? I'm considering using traditional tables code <table> since it's simpler, but modern practice leans towards Divs. So, what is the most polished approach to achiev ...

htmlcssgrid-layout