-
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
-
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.
-
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
-
-
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?
-
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.
-
-
-
-
Re: HTML Tile iFrame Height Issue
kim.nelsonJan 22, 2016 2:22 PM (in response to mrkustka)
Can you share the code you are using for this?
-
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>
-
-
-
Re: HTML Tile iFrame Height Issue
Gui Batista Feb 4, 2016 2:50 PM (in response to mrkustka)2 people found this helpfulMatt, 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.
-
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
-
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.
-
-
-
Re: HTML Tile iFrame Height Issue
Vikash Kushvaha Mar 14, 2016 1:26 AM (in response to mrkustka)2 people found this helpfulHi Matt Kustka
Try to add following script in your code
<script type="text/javascript"> gadgets.util.registerOnLoadHandler(function() { gadgets.window.adjustHeight(); }); </script>
-
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 ;-(
-