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

    HTML Tile iFrame Height Issue

    mrkustka Novice
    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?

        • Re: HTML Tile iFrame Height Issue
          patohagan Advanced
          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
            kim.nelson Expert
            kim.nelson Champion Jan 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 Novice
                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
                Advanced
                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
                  • Re: HTML Tile iFrame Height Issue
                    dmariano002 Novice
                    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 Beginner
                        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 Novice
                      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