plane icon Welcome to Microsoft Flight Simulator’s SDK Q&A Platform!

You have questions regarding the SDK? DevMode Tools? SimConnect? You would like to submit an idea for future improvements, seek help or exchange knowledge? You’re in the right place.

In the upcoming flighting, we've changed the behaviour of the content.xml file. If your addon uses this file, please read this article!

Please take a moment to read the platform’s guidelines before you get started!


question

CaptMatto avatar image
CaptMatto asked CaptMatto commented

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

Hi

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

1645891971162.png

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:

1645892094744.png


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.

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/SCSS/common.css" />
    <link rel="stylesheet" href="bonanza-hangar.css" />
    <script type="text/javascript" src="/JS/coherent.js"></script>
    <script type="text/javascript" src="/JS/common.js"></script>
    <script type="text/javascript" src="/Pages/VCockpit/Instruments/Shared/BaseInstrument.js"></script>
    <script type="text/javascript" src="/JS/dataStorage.js"></script>
    <script type="text/javascript" src="/JS/buttons.js"></script>
    <script type="text/javascript" src="/JS/Services/ToolBarPanels.js"></script>
    <script type="text/javascript" src="/JS/simvar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="import" href="/templates/virtualScroll/virtualScroll.html" />
    <link rel="import" href="/templates/NewPushButton/NewPushButton.html" />
    <link rel="import" href="/templates/ToggleButton/toggleButton.html" />
    <link rel="import" href="/templates/tabMenu/tabMenu.html" />
    <link rel="import" href="/templates/ingameUi/ingameUi.html" />
    <link rel="import" href="/templates/ingameUiHeader/ingameUiHeader.html" />
    <title>Hangar</title>
  </head>
  <body class="border-box" >
    <bonanza-hangar>
      <ingame-ui id="bonanza_frame" panel-id="G36_Panel" class="ingameUiFrame panelInvisible" title="Bonanza Hangar" content-fit="true" min-width="994" min-height="1138" resize="both">
        <section id="MainDisplay" style="height: 100vh;">
          <iframe name="display-frame" id="iframeId" src="pages/home.html#climb" frameborder="0" style="padding: 0;margin: 0;"></iframe>
        </section>
      </ingame-ui>
    </bonanza-hangar>
    <script type="text/javascript" src="bonanza-hangar.js"></script>
  </body>
</html>
bughelp
1645891971162.png (945.0 KiB)
1645892094744.png (660.7 KiB)
10 |10000

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Boris_ avatar image
Boris_ answered CaptMatto commented

Hello @CaptMatto ,
I have some news :)


the file bonanza-hangar.css should be like this

iframe {
  width: 100%;
  box-sizing: border-box;
  border: none;
}

and the bonanza-hangar.html

<bonanza-hangar>
      <ingame-ui id="bonanza_frame" panel-id="G36_Panel" class="ingameUiFrame panelInvisible" title="Bonanza TOTO" content-fit="true" min-width="994" min-height="1138" resize="both">
        <ui-element id="MainDisplay" style="display: flex">
          <iframe name="display-frame" class="responsive-iframe"  id="iframeId" src="pages/home.html" ></iframe>
        </ui-element>
      </ingame-ui>
 </bonanza-hangar>


Regards,
Boris

1 comment
10 |10000

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Thank you so much Boris (and to the Devs)

Can confirm that has fixed the problem I was seeing! :-)

1 Like 1 ·
Boris_ avatar image
Boris_ answered CaptMatto commented

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


4 comments
10 |10000

Up to 5 attachments (including images) can be used with a maximum of 4.8 MiB each and 23.8 MiB total.

Hi Boris

Thanks so much for your answer and coming back to me :-)

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.

#bonanza_frame iframe {
  width: 100%;
  height: calc(100% - 60px);
  border: none;
  position: relative;
}

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

0 Likes 0 ·
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! :-)
0 Likes 0 ·

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

0 Likes 0 ·
Show more comments

Write an Answer

Hint: Notify or tag a user in this post by typing @username.

Up to 5 attachments (including images) can be used with a maximum of 19.1 MiB each and 23.8 MiB total.