19 Replies Latest reply on Jan 11, 2017 11:39 AM by dmariano002

    Custom View Tile placed on News Page loads partially behind Top and Trending news

    hmitchell

      We are having an issue with a Custom View tile placed on our News Page in the top left tile slot, right above the TOP & TRENDING News divs (cloud).  Our Custom View tile loads partially behind the TOP & TRENDING news.

       

      What we observe is:  the Custom Tile takes longer to load than the rest of the page, so the TOP & TRENDING news loads first.  Once our tile does load, we are adjusting the height of the tile to fit our content using gadgets.window.adjustHeight(900).  Our tile ends up partially behind the TOP & TRENDING news.  If we size the browser window down to mobile view and then back up, a complete resize/repositioning of the page is triggered, which fixes the issue, but we'd like it to position itself properly from the beginning.

       

      Our assessment so far:  It looks like the TOP & TRENDING news div has a top position set before our tile above resizes, but we do not understand how to tell that TOP & TRENDING div to reposition itself (our tile is buried in an iframe, and again we are on cloud).  Because sizing the browser window down to mobile view and then back up triggers a resize/repositioning of the page and fixes the issue, we are led to believe that TOP & TRENDING could react appropriately to the resizing of the tile, but we don't if this is a defect or our own end-user error.  When we place the same tile on an activity page above other tiles, we do not have this issue, so it makes us wonder if there is something Jive could do to the TOP & TRENDING positioning code, or if there is something else we need to do to our tile.  Has anyone else had this issue or might know of something to try?

       

      Here is what the HTML for the TOP & TRENDING looks like; notice the position is explicit, and this is at least one value not updating and causing issues after our tile resizes:

       

      To demonstrate, we have taken the sample tile (jive-sdk create tile-app-simple --name="my-tile") and modified it very slightly to reproduce the issue.  We have added to the view.html the height adjustment

       

          <script>
              gadgets.window.adjustHeight (900);
          </script>
      

       

      which triggers the resize of our tile,

      and we added a red background color to main.css to make it obvious where the Custom View tile begins and ends:

      body {
          color: #5e5e5e;
          background-color: red;
      

       

       

      The following diagram shows how the News Page is loaded with our Custom view tile, behind the TOP & TRENDING news:

      customViewTileOverlap2.jpg

       

      This is how the sample tile actually looks in our preview site, partially behind TOP & TRENDING.  Again, we made the background of the tile body bright red, so that it is clear that the tile resizes but that TOP & TRENDING div does not reposition (see the bottom of the screen shot).

       

       

      The red at the very bottom is part of our custom view tile.  Notice that it is behind the Top and Trending.

       

      For reference, this is where the tile is placed during the configuration process: