4 Replies Latest reply on Nov 1, 2017 2:10 AM by aqn3130

    Responsive Custom Tile Widths

    andrewfrueh

      Hi all, I'm working on a creating a custom tile to replace a number of HTML tiles that we're using around our site.  I ran into one issue I couldn't find a good answer for, so I wanted to run it by you all.  The iFrame that is produced when you create an HTML tile looks like this:

       

      HTML Tile iFrame

      <iframe src="xxxxxxxx" id="0ldn5we1qnym" class="j-tile-iframe j-tile-iframe-wide" style="height:520px;" frameborder="0"></iframe>

       

      which is nice because the width isn't fixed, so as a user changes the width of their browser window, the tile adjusts its layout to match on the fly.  However, this is the iFrame for a custom tile:

       

      Custom Tile iFrame

      <iframe scrolling="no" marginwidth="0" marginheight="0" vspace="0" hspace="0" id="tileFrame4" name="tileFrame4" style="height: 223px; width: 840px;" width="100%" height="100" frameborder="0"></iframe>

       

      In that iFrame, the width is fixed in the inline style.  So it's responsive relative to the width of the window when the page is loaded, but if the user changes the window width after, the container tile will adjust, but the content inside the tile stays at the fixed width.

       

      Is this just a constraint of a custom tile, or is there something that can be set in definition.json, or some kind of onResize function that can be added to the Javascript to correct the iFrame fixed width?  Thanks in advance!