Custom Toolbar Panel Window - anchor links in iframe breaks top border

Questions & Community Discussions
1

Hi I have a custom toolbar panel which is loading local content into an
iframe.

1148×1140 245 KB
When I add a hyperlink
in the iframe html using href=“#elementId” linking to another part of the
iframe the toolbar window breaks and looses the top part with the
maximise/minimise on clicking. See below:
1158×1149 163 KB
I think the hyperlink is
loading the html from the iframe in the main content area rather than leaning
it in the iframe. Anyone got any pointers with how to fix this? UPDATE:
Interestingly if you change the iframes source to point to the anchor link you
get the same issue.

      1.  lang="en">
  2.     9.      type="text/javascript" src="/JS/common.js">  34.
2

Hello @CaptMatto , I think you are talking about
this package ? I
used SU8 and your development branch on your Github reposity to test and I
wasn’t abble to reproduce this behaviour. All it’s working for me in SU8 SU8
will be available in a few hours. Once you have installed it, can you try
again and tell me if the problem is still there? Thanks, Regards, Boris

3

Hi Boris Thanks so much for your answer and coming back to me :slight_smile: Is indeed
that package and I’m running SU8 Beta. I’ve managed to kind of circumvent the
issue by adding some CSS to the iframe. It looks like when you click an anchor
link in the iframe it is moving the physical panel up when it scrolls down to
the anchor, the addition of the CSS below is a slight work around that I found
after posting. I’ve basically removed 60px from the iframe.

      1. #bonanza_frame iframe {
  2.   width: 100%;
  3.   height: calc(100% - 60px);
  4.   border: none;
  5.   position: relative;
  6. }

I would use normal html pages but I couldn’t get the panel to load a new html
page so had to use the iframe approach. Many thanks for the great resource
here! Regards, Matt

4

Just a quick note to say I have moved over the SU8 release rather than the
Beta and my CSS above is working as an interim fix but I’m not sure if this is
a bug in the Custom Panel rendering or whether it’s my coding! :slight_smile:

5

I’m waiting for the answer of a developper. I’ll let you know as soon as I
know.

6

Thank you Boris!

7

Hello @CaptMatto , I have some news :slight_smile: the file
bonanza-hangar.css should be like this

      1. iframe {
  2.   width: 100%;
  3.   box-sizing: border-box;
  4.   border: none;
  5. }

and the bonanza-hangar.html

      1.   2.        id="bonanza_frame" panel-id="G36_Panel" class="ingameUiFrame panelInvisible" title="Bonanza TOTO" **content-fit ="true"** min-width="994" min-height="1138" resize="both">
  3.          id="MainDisplay" **style ="display: flex"**>
  4.            name="display-frame" class="responsive-iframe"  id="iframeId" src="pages/home.html" >
  5.         
  6.       
  7.

Regards, Boris

8

Thank you so much Boris (and to the Devs) Can confirm that has fixed the
problem I was seeing! :slight_smile: