FHIR Chat · Anchor tag causes blank menu items · IG creation

Stream: IG creation

Topic: Anchor tag causes blank menu items

Max Masnick (Jan 05 2021 at 23:48):

The following menu.xml (generated by SUSHI) will insert an extra, unwanted menu item in a dropdown:

<ul xmlns="http://www.w3.org/1999/xhtml" class="nav navbar-nav">
  <li>
    <a href="index.html">Home</a>
  </li>
  <li>
    <a href="artifacts.html">Artifacts</a>
  </li>
  <li class="dropdown">
    <a data-toggle="dropdown" href="#" class="dropdown-toggle">Dropdown
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li>
        <a href="index.html#1">Index with anchor</a>
      </li>
      <li>
        <a href="artifacts.html">Artifacts</a>
      </li>
    </ul>
  </li>
</ul>

Screen-Shot-2021-01-05-at-6.32.55-PM.png

This appears to be due to the anchor (#1) in the first menu item. Removing this fixes the problem:

Screen-Shot-2021-01-05-at-6.33.41-PM.png

Here's a sample project (.zip) to reproduce the issue. I modified sushi-config.yaml to add/remove the anchor from the link in order to take these screenshots.

Grahame Grieve (Jan 06 2021 at 00:24):

that's not actually the problem. The IG publisher will insert an <a name="{guid}"> </a> anywhere it finds a broken link, so it can refer to it from qa.html. That isn't visible, except in the menus where it causes this effect. it'll disappear when the link isn't a broken link

Max Masnick (Jan 06 2021 at 10:23):

Ah, thank you! I didn't realize that some anchor names are added in via JavaScript (like <h3 id="structures-resource-profiles">) rather than being part of the raw HTML file generated by the IG Publisher. These _looked_ like valid links when viewing the page in a browser, but from the Publisher's perspective they are not.

Last updated: Apr 12 2022 at 19:14 UTC