Issues related to Boostrap 5 navbar-dropdown?

bfalchuk commented 2 years ago

Are there any known issues relating to bootstrap 5 navbar? When I include alt-iframe at the bottom of my html page it will sometimes have the implication that the page's bootstrap navbar-dropdown does not drop-down (similarly, in the code below, if I comment out the inclusion of the alt-iframe lib on the problematic pages, then the dropdown works again). You can see that at this page: https://uppernyack150.netlify.app/index.html , wherein the "Exhibits" dropdown does not work. Yet the same code approach on this page works: https://uppernyack150.netlify.app/gallery.html . At the top of the index.html page I use a bootstrap 5 navbar (snippet below):

       <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container">
                <a class="navbar-brand" href="#"><img id="img_logo_goose" src="img/goose1.png" data-bs-toggle="offcanvas" href="#offcanvas_goose" role="button" >&nbsp;Upper Nyack 150</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
                        <!-- <li class="nav-item"><a class="nav-link" href="kickoff.html">Kickoff</a></li> -->
                        <li class="nav-item"><a class="nav-link" href="events.html">Events</a></li>
                        <li class="nav-item dropdown active">
                            <a class="nav-link dropdown-toggle" href="#" id="drop1" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                              Exhibits/History
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                              <li><a class="dropdown-item" href="history.html">History & Links</a></li>
                              <li><a class="dropdown-item" href="map.html">Upper Nyack History Map</a></li>

and at the bottom of the page the last thing i'm doing is including alt-iframe like this:

        </div><!-- container -->
        <div src="/modals/offcanvas_goose.html" replace></div> <!-- div gets replaced by the source -->
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
        <script src="js/alt-iframe.min.js"></script> <!-- put last - loads and replaces html tags with new content -->
</body>
</html>

The included html (meant to replace the div) is simply a modal div, or in another case, an off canvas div, nothing special.

FrontEndNeo commented 2 years ago

Hi,

I'm looking into the issue, until the next release could you please try any one of the options below.

Option-1: remove replace attribute for elements directly under body

<body>
  ... ... ...
  ... ... ...

  <div src="/modals/offcanvas_goose.html"></div>

  ... ... ...
  ... ... ...
</body>

Option-2: wrap with some element <div> <p> <section> etc. if still want to use replace attribute

< body >
  ... ... ...
  ... ... ...

  <div> <!--  wrapper element -->
    <div src="/modals/offcanvas_goose.html" replace></div>
    <div src="/modals/credits_modal.html" replace></div>
  </div>

  ... ... ...
  ... ... ...
</body>

Hope this helps.

bfalchuk commented 2 years ago

Thanks, this seems to have worked; what i did was combine both your suggestions (using a div, as well as not using replace option) like this:

        <div id="components">
            <div src="/modals/offcanvas_goose.html"></div>
            <div src="/modals/credits_sliders_modal.html"></div>
        </div>

I think for my little experiment this is all fine.

I'd love to hear - as a matter of discussion - how you'd compare and contrast this lib vs an html-include type library like: https://github.com/justinfagnani/html-include-element

FrontEndNeo commented 2 years ago

Thanks for confirming. What you did is the recommended approach. Use the "replace" attribute only if it's absolutely necessary otherwise in most cases just including the "src" will be sufficient. Also, a small suggestion, you don't require an ID for the wrapper container unless you use the id for any DOM manipulation later elsewhere in your code.

Regarding comparing this library with other libraries, I would leave it to the developer who is comfortable with it based on their knowledge, understanding, and requirements. Because in the open-source world there are always alternate libraries for each library with its objectives/goals. Example jQuery vs zepto, Underscore vs Lodash, Mustache vs Handlebars, Ember vs Knockout, Angular vs React vs Vue and the list goes on. There is no right or wrong or which is the best! as each library will solve some problems and leave some other problems.

I created this library to help web developers organize the files in a simple structure. Later, the same can be easily upgraded to a full-featured SPA application using SPAjs, if required. SPAjs is an extremely simple and lightweight alternate to Angular / React / Vue to build a Single Page Application. Give it a try, you may like it 😊.

Thanks again 😊

FrontEndNeo / alt-iframe

Issues related to Boostrap 5 navbar-dropdown? #1