13 Replies Latest reply on Nov 3, 2016 12:06 PM by Jordan Dayton

HTML Tile iFrame Height Issue

mrkustka Jan 22, 2016 1:51 PM

I'm using and HTML tile that has two rows each with two blocks for a total of four blocks. The HTML tile requires you to set a height for this content because JIVE brings it all in a an iFrame. The height of the iFrame is fine when viewing on a desktop. However, the content is designed to be responsive. In the mobile view the blocks all stack on top of each other and because the iFrame has a height set the content is cut off and now scrolls. See attached images...

Does anyone know how to change the iFrame height to handle the desktop view and the mobile view so there is no scrolling?

Screen Shot 2016-01-22 at 4.49.01 PM.png 42.0 KB
Screen Shot 2016-01-22 at 4.48.38 PM.png 78.2 KB

Re: HTML Tile iFrame Height Issue

patohagan Jan 22, 2016 1:55 PM (in response to mrkustka)

What size is in the iframe?

Sent from Samsung Mobile on O2
Like (0)

Actions
- Re: HTML Tile iFrame Height Issue
  
  mrkustka Jan 26, 2016 6:39 AM (in response to patohagan)
  
  The height is set to 300px. This setting works great on a desktop view. But in the mobile view the four tiles stack on top of each other. This 300px height cause that tile to scroll vertically. In the mobile view I would need a height of 600px. See screen shots.
  
  Screen Shot 2016-01-26 at 9.38.51 AM.png 283.7 KB
  
  Screen Shot 2016-01-26 at 9.37.51 AM.png 163.3 KB
  
  Screen Shot 2016-01-26 at 9.35.04 AM.png 264.1 KB
  
  Like (0)
  
  Actions
  - Re: HTML Tile iFrame Height Issue
    
    dougblizz Jan 26, 2016 12:10 PM (in response to mrkustka)
    
    Hey Matt. Sorry I missed our meeting last week. When you say it looks fine on desktop, it doesn't look fine on my desktop view.
    
    When I first go to the news page I don't see either the banner tile or the quadrants. When I refresh the page I get them but the quadrants are messed up. Same problem on Jamie's computer BTW.
    
    See below and attached.
    
    Doug
    
    mycai news2.JPG 128.4 KB
    
    mycai news1.JPG 52.2 KB
    
    Like (0)
    
    Actions
  - Re: HTML Tile iFrame Height Issue
    
    patohagan Feb 1, 2016 9:52 AM (in response to mrkustka)
    
    have you tried setting it to 100% instead?
    
    Like (0)
    
    Actions
    - Re: HTML Tile iFrame Height Issue
      
      mrkustka Feb 1, 2016 12:40 PM (in response to patohagan)
      
      Only allows pixels in the height setting. If left blank it defaults to 250px.
      
      Like (0)
      
      Actions
Re: HTML Tile iFrame Height Issue

kim.nelson Jan 22, 2016 2:22 PM (in response to mrkustka)

Can you share the code you are using for this?
Like (0)

Actions
- Re: HTML Tile iFrame Height Issue
  
  mrkustka Jan 26, 2016 6:40 AM (in response to kim.nelson)
  
  Code in HTML Tile:
  
  <html>
  <head>
  <style>
  body {
  margin: 0px;
  padding: 0px;
  }
  #grid-banner {
  width: 100%;
  display: block;
  margin: 0px;
  padding: 0px;
  }
  #grid-banner ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
  }
  #grid-banner li {
  padding: 0px;
  margin-right: 1%;
  margin-bottom: 1%;
  list-style: none;
  width: 48%;
  display: inline-block;
  float: left;
  }
  .red-banner {
  background: #a51e36;
  float: left;
  width: 100%;
  }
  .red-banner:hover {
  background: #c14651;
  }
  .orange-banner {
  background: #d87b28;
  float: left;
  width: 100%;
  }
  .orange-banner:hover {
  background: #df924b;
  }
  .green-banner {
  background: #aaaf37;
  float: left;
  width: 100%;
  }
  .green-banner:hover {
  background: #b9bb5b;
  }
  .blue-banner {
  background: #42758f;
  float: left;
  width: 100%;
  }
  .blue-banner:hover {
  background: #66889f;
  }
  .banner-icon {
  width: 75px;
  float: left;
  padding: 25px 15px;
  text-align: center;
  }
  .banner-icon img {
  max-width: 100%;
  height: auto;
  }
  .banner-text {
  width: 65%;
  float: left;
  padding: 35px 10px 25px 10px;
  }
  .banner-text h2 {
  color: #ffffff;
  font-family: Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
  font-size: 28px;
  line-height: 30px;
  font-weight: normal;
  padding: 0px 0px 15px 0px;
  margin: 0px;
  }
  .btn {
  background: #c3c3c4;
  background-image: -webkit-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -moz-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -ms-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -o-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: linear-gradient(to right, #c3c3c4, #ffffff);
  -webkit-border-radius: 3;
  -moz-border-radius: 3;
  border-radius: 3px;
  font-family: Arial;
  color: #000000;
  font-size: 12px;
  padding: 8px;
  border: solid #d9dbdb 1px;
  text-decoration: none;
  width: 200px;
  text-transform: uppercase;
  display: inline-block;
  text-align: center;
  }
  .btn:hover {
  background: #c3c3c4;
  background-image: -webkit-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -moz-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -ms-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: -o-linear-gradient(left, #c3c3c4, #ffffff);
  background-image: linear-gradient(to right, #c3c3c4, #ffffff);
  text-decoration: none;
  }
  
  @media only screen and (max-width:40em) {
  #grid-banner li {
  padding: 0px;
  margin-right: 0%;
  margin-bottom: 1%;
  list-style: none;
  width: 100%;
  display: block;
  float: left;
  }
  }
  </style>
  </head>
  
  <body>
  <div id="grid-banner">
  <ul>
      <li>
        <div class="red-banner">
          <div class="banner-icon"><img src="https://my.capital.org/resources/statics/1002/2016-IconAdvice.png" width="64" height="54" alt="Advice & Resolution"/></div>
          <div class="banner-text">
            <h2>Advice & Resolution</h2>
            <div class="banner-button"><a href="https://my.capital.org/community/advice-and-resolution" target="_top" class="btn">Ask A CAI Advisor</a></div>
          </div>
        </div>
      </li>
      <li>
        <div class="orange-banner">
          <div class="banner-icon"><img src="https://my.capital.org/resources/statics/1002/2016-IconEngage.png" width="64" height="54" alt="Engage & Connect"/></div>
          <div class="banner-text">
            <h2>Engage & Connect</h2>
            <div class="banner-button"><a href="https://my.capital.org/community/engage-and-connect" target="_top" class="btn">Find A Member Group</a></div>
          </div>
        </div>
      </li>
      <li>
        <div class="green-banner">
          <div class="banner-icon"><img src="https://my.capital.org/resources/statics/1002/2016-IconData.png" width="64" height="54" alt="Data & Research"/></div>
          <div class="banner-text">
            <h2>Data & Research</h2>
            <div class="banner-button"><a href="https://my.capital.org/community/data-and-research" target="_top" class="btn">Research CAI Content</a></div>
          </div>
        </div>
      </li>
      <li>
        <div class="blue-banner">
          <div class="banner-icon"><img src="https://my.capital.org/resources/statics/1002/2016-Iconlearn.png" width="64" height="54" alt="Learn & GO"/></div>
          <div class="banner-text">
            <h2>Learn & GO</h2>
            <div class="banner-button"><a href="https://my.capital.org/community/learn-and-go" target="_top" class="btn">Access Training & Tools</a></div>
          </div>
        </div>
      </li>
  </ul>
  </div>
  </body>
  </html>
  
  Like (0)
  
  Actions
Re: HTML Tile iFrame Height Issue

mrkustka Feb 1, 2016 1:07 PM (in response to mrkustka)

Shaun Slattery Gui Batista
Like (0)

Actions
Re: HTML Tile iFrame Height Issue

gui.batista Feb 4, 2016 2:50 PM (in response to mrkustka)

Matt, so we had one of our UI experts weigh in on the topic. Long story short, this is what our UI guy said, "...there is no workaround at the moment. Since the HTML tile is rendering the contents within an Iframe that is in a different domain, there is no way to talk to the parent window to trigger the resize script. The only custom solution is to use this custom code in a custom view tile, documented here: https://community.jivesoftware.com/docs/DOC-141800. It requires a lot of development knowledge and access to the Jive SDK along with a few other dependencies."

Mine and Shaun Slattery's recommendation is that you use the fallback solution of the call to action tile. Not only will this be easier, it will have no risk of breaking in the future. Let us know if you have any other questions and my apologies that this didn't work out exactly as planned.
2 people found this helpful
Like (0)

Actions
- Re: HTML Tile iFrame Height Issue
  
  dmariano002 Jun 13, 2016 1:10 PM (in response to gui.batista)
  
  Hi Gui Batista,
  
  Do you have any news about this issue? The only way to solved that is using Custom View tiles?
  
  Thanks in adnvance
  
  Like (1)
  
  Actions
  - Re: HTML Tile iFrame Height Issue
    
    Jordan Dayton Nov 3, 2016 12:06 PM (in response to dmariano002)
    
    I would love an update here, as well!
    
    I develop a lot of html tiles that have divs that wrap to the next row when the screen width gets smaller (desktop, tablets, phones).
    
    All we need is for Jive to somehow make it so that the html tile height can auto resize based on the content placed therein. I can understand what Gui Batista said about "HTML tile is rendering the contents within an Iframe that is in a different domain" how it would not be able to know how large to resize the height of the tile... but I still wonder if there's a way to figure it out!
    
    Further, in the tiles that I'm making, I am not embedding an iframe of another domain but actually creating everything via html and css within the HTML Tile itself. Gui, do you think that Jive could tweak this tile so examine the code and adjust the height based on the html and css contained therein? This would be so helpful.
    
    Like (0)
    
    Actions
Re: HTML Tile iFrame Height Issue

Vikash Kushvaha Mar 14, 2016 1:26 AM (in response to mrkustka)
Hi Matt Kustka

Try to add following script in your code

<script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { gadgets.window.adjustHeight(); }); </script>
2 people found this helpful
Like (2)

Actions
- Re: HTML Tile iFrame Height Issue
  
  Jordan Dayton Nov 3, 2016 11:58 AM (in response to Vikash Kushvaha)
  
  This didn't work for me ;-(
  
  Like (0)
  
  Actions

Go to original post