1

I am incorporating a Plotly image into a html file. I want to make six boxes with three in each row and then put images in each box. Things work fine but I can't stretch vertically the plotly plot. I tried to increase height by increasing height in terms of pixels and % but that only increases the size of the boxes and not the image height.

I used the css mainly from a post in stackoverflow. CSS: Can a div "float:middle" rather than "float:left;" with margin-left?

The html file is:

    <!DOCTYPE html> 
<!--It's a best practice to always declare DOCTYPE!-->
<html lang="en">
  <head>
    <title>Making a Table</title>
      <meta charset="utf-8">
  </head>
  <body>
    <header>
      <h2>Draft template for Presentation</h2>
      <h1>Plots and maps</h1>
    </header>

    <section id="content">
          <div class="boxes">
            <div class="box leftbox">
            <iframe  src="https://plot.ly/~shais2267/0/lat-vs-long.embed" frameborder="0" allowfullscreen></iframe>
            </div>
            <div class="box"></div>
            <div class="box rightbox"></div>
</div>
                <div class="boxes">
            <div class="box leftbox"></div>
            <div class="box"></div>
            <div class="box rightbox"></div>
</div>
    </section>
  </body>
</html>

The css file is:

body {
  background-color: #4ABDAC;
  color: #FFFFFF;
  font-family: Georgia, serif;
}
header {
  background-color: #F7B733;
  height: 75px;
}

h1 {
  padding: 15px;
}
h2{
  text-align: right;
  float: right;
  padding-right: 20px;
}
.boxes {width:90%; 
  text-align:center; 
  margin: 5;
  padding: 5;
    margin-left: auto;
    margin-right: auto;
    margin-top: none;
    margin-bottom: none;
    border-top: 4px solid #00ccff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: white;
   border-bottom: 4px solid #00ccff;
}
.boxes .box {width:30%; height:250px; background:#f0f0f0; display:inline-block}
.leftbox {float:left;height:250px}
.rightbox {float:right;}

#content {
  background-color: #DFDCE3;
  width: 100%;
  height: 322px;
  margin: 0 auto;
}

This could be found in codepen.io
https://codepen.io/shammun/pen/xRYaxV

Community
  • 1
  • 1
Koushik Chowdhury
  • 53
  • 7

2 Answers2

0

You can specify the height and width directly in your iframe, e.g.

<iframe  src="https://plot.ly/~shais2267/0/lat-vs-long.embed" frameborder="0" allowfullscreen height="500px" width="600px"></iframe>

Specifying the height and width via CSS is not possible in this case, see here for a detailed discussion.

Community
  • 1
  • 1
Maximilian Peters
  • 30,348
  • 12
  • 86
  • 99
  • OK, so I am actually doing it in slidify and in slidify, height and width within iframe doesn't seem to work. For this reason, I am using classes and ids to adjust the plotly figure size. I used the option you mentioned and it didn't give me a proper aligned pic. I think I will have to use class and/or ids to set the picture correctly. – Koushik Chowdhury Dec 04 '16 at 13:06
  • Just made it happen. I used the following line: – Koushik Chowdhury Dec 04 '16 at 19:15
0

First off I would never use an iframe, there are other ways to do this which are more friendly, try instead using the HTML 5 compliant <embed> tag which also have the height and width and give a clearer purpose as to what you are doing. http://www.w3schools.com/tags/tag_embed.asp

Travis Fields
  • 1