Bootstrap 4.2.1: subfolder page crash Navbar

Question

I have an ASP.NET website using Masterpages and some pages are being loaded from a specific subfolder. Using Bootstrap 4.0 everything were ok.

But now, using Bootstrap 4.2.1, when I jump to one of these pages, the NavBar options which contain submenus using class="nav-link dropdown-toogle" are broken.

When I put the mouse over the dropdown menu, no options appear below (the related menu is not loaded/shown).

I investigate why it's occurring and I saw that the HREF (which if pointing originally to #) is showing now "../#" and Chrome sends the following message:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '../#' is not a valid selector.

All the remaining code is exactly the same.

The code is shown below:

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

When I go to the subfolder page, the code appears like below:

<li Class="nav-item dropdown">
    <a runat="server" Class="nav-link dropdown-toggle" href="../#" 

NOTE ABOVE THE ../# in HREF

Interesting to note that:

1. Command options that are not using any dropdown option, have HREF="../" but Bootstrap understand them normally.
2. Command options which have dropdown options (like the above), have HREF="../#" (instead just "#") and Bootstrap sends an error to DOM and does not open the related menu.

Any tip to solve it? I appreciate in advance.

UPDATE

Talking with support they had recommended to use data-target=# or even put an ID into the dropdown-toogle class control and reference it with data-target.

No success at all. Seeing the DOM I can see that, when the content page is loaded (and it is on a subfolder), the HREF changes and seems to paralyse Bootstrap...

UPDATE-2

I made a test moving all pages from the subfolder to the main folder (a not accepted solution by the client) and everything functions like a charm. The problem is related with Bootstrap 4.2.1 + ASP Materpages + Pages in SubFolder.

And as recommended below, I took off the HREF=# to a try... no success at all.

UPDATE-3

Siava had recommeded to remove runat=server and change some links, ensuring that he is simulating there either the problem as the solution. But, unfortunetly, I had the following results:

You can see above that the problem with HREF had disappeared BUT the problem persisted.

If we analyze the errors of Chrome, we see this:

If you had faced and solved this problem, I will appreciate a lot to inform here.

Hugs!

Answer 1

Might even be a feature :)

Try removing server-side processing from your dropdown anchors, as using it seems to cause the parser to think "#" is a resource at the level of your MasterPage, thus prepending it with ../ to go up a level.

<a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

This would work as currently you do not seem to have any server-side processing on that tag. Should that happen in the future, you may use NavigateUrl="#" instead:

<a runat="server" Class="nav-link dropdown-toggle" NavigateUrl="#" id="AdmFuncs" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Arquivos</a>

Hope this helps!

---

Update:

Have just been able to reproduce your issue (dropdown in master page, browsing page from subfolder, Bootstrap 4.2.1) and have fixed it with the following:

<li Class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="AdmFuncs" role="button" data-toggle="dropdown" data-target="AdmFuncsDropDown" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu" id="AdmFuncsDropDown" aria-labelledby="navbarDropdown" >
        <a class="dropdown-item" href="/AdminActions/Categorias.aspx">Categorias</a>
        <a class="dropdown-item" href="/AdminActions/Fabricantes.aspx">Fabricantes</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="/AdminActions/Recepcao.aspx">E-mail Receptor</a>
    </div>
</li>

If this does not work try clearing the cache as well (Ctrl + Shift + R), otherwise there is some other part or error that makes the error persist.