Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Issues related to Boostrap 5 navbar-dropdown? #1

Closed
bfalchuk opened this issue Feb 15, 2022 · 3 comments
Closed

Issues related to Boostrap 5 navbar-dropdown? #1

bfalchuk opened this issue Feb 15, 2022 · 3 comments
Assignees
@FrontEndNeo

Comments

@bfalchuk
Copy link

bfalchuk commented Feb 15, 2022 •
edited

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 FrontEndNeo self-assigned this Feb 15, 2022
@FrontEndNeo
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

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 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@FrontEndNeo FrontEndNeo

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@bfalchuk @FrontEndNeo