markbind Box tooltip shows up above side menu when window is collapsed

Please confirm that you have searched existing issues in the repo

Yes, I have searched the existing issues

Any related issues?

No response

Tell us about your environment

Windows 10, Chrome Version 134.0.6998.89

MarkBind version

5.6.0

Describe the bug and the steps to reproduce it

Have a page including the following element

<box type="tip" seamless>

Tooltip
</box>

Minimise the window such that the left menu collapses

Open the hamburger menu

You should see the box tooltip above the side menu. You can try it for yourself in WATcher docs

Expected behavior

The tooltip box should be below left side menu

Anything else?

WATcher docs

Mar 18 '25 14:03 NorbertLoh

Thanks for reporting. There's definitely a problem with the WATcher site, as the same box component doesn't seem to have the same issue in MarkBind UG or even in a new site generated. Suspecting it is either due to subtle differences between how WATcher site is constructing its page layout, or outdated styling files, or some outdated generated markbind files.

If we change the box (or any element)'s position to relative then it will no longer be covered by the sitenav, despite the sitenav having z-index of 999

Mar 19 '25 13:03 tlylt

@tlylt Thanks for the reply! I have tested it out. The issue exists as well on my local machine with the latest markbind after I delete all previously generate files.

The site nav section seems to fit the usage in the UG as well. May I ask how did you manage to get it to work by setting the element position to relative? I tried a few ways on my end and could not get it to work. Thank you!

Mar 19 '25 14:03 NorbertLoh

May I ask how did you manage to get it to work by setting the element position to relative

Sorry I meant the opposite. If you remove the position relative property on the alert box then it won't be covered by the site nav anymore. If you add position relative to any element, then that element will no longer be covered by the site nav.

I don't think this is a fix, just pointing out how the error can also be reproduced. I think not just box, panel also has issue when used in the WATcher site.

I think instead of modifying the WATcher site, we can try to create a new site (markbind init) and then modify it step by step to copy the WATcher code over, to see exactly at which step did the site nav functionality break.

Mar 19 '25 15:03 tlylt

I managed to reproduce the issue and I think the problem is with a the non-sticky header that the WATcher site is currently using. (In fact, the WATcher site configuration currently places <navbar> at the root level without having a <header> around it.)

However, this is definitely a bug and I will be looking at it.

Current Suggestion

  <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand"><img src="{{baseUrl}}/images/catcher_logo.png" width="40"/></a>
  <li><a href="{{baseUrl}}/index.html" class="nav-link">HOME</a></li>
  <li><a href="{{baseUrl}}/ug/index.html" class="nav-link"> USER GUIDE </a></li>
  <li><a href="{{baseUrl}}/dg/index.html" class="nav-link"> DEVELOPER GUIDE </a></li>
  <li><a href="{{baseUrl}}/about-us.html" class="nav-link"> ABOUT US </a></li>
  <li><a href="https://github.com/CATcher-org/WATcher" target="_blank" class="nav-link"><span><span aria-hidden="true" class="fab fa-github"></span></span></a></li>
  <li slot="right">
    <form class="navbar-form">
      <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
    </form>
  </li>
</navbar>

<header sticky>
  <navbar type="dark">
    <a slot="brand" href="{{baseUrl}}/index.html" title="Home" class="navbar-brand"><img src="{{baseUrl}}/images/catcher_logo.png" width="40"/></a>
    <li><a href="{{baseUrl}}/index.html" class="nav-link">HOME</a></li>
    <li><a href="{{baseUrl}}/ug/index.html" class="nav-link"> USER GUIDE </a></li>
    <li><a href="{{baseUrl}}/dg/index.html" class="nav-link"> DEVELOPER GUIDE </a></li>
    <li><a href="{{baseUrl}}/about-us.html" class="nav-link"> ABOUT US </a></li>
    <li><a href="https://github.com/CATcher-org/WATcher" target="_blank" class="nav-link"><span><span aria-hidden="true" class="fab fa-github"></span></span></a></li>
    <li slot="right">
      <form class="navbar-form">
        <searchbar :data="searchData" placeholder="Search" :on-hit="searchCallback" menu-align-right></searchbar>
      </form>
    </li>
  </navbar>
</header>

Mar 24 '25 05:03 yyccbb