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.

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

Navbar in "mobile mode" doesn't collapse when option clicked #712

Closed
Scalpel78 opened this Issue Jul 19, 2017 · 22 comments

Comments

Projects
None yet
5 participants
@Scalpel78

Scalpel78 commented Jul 19, 2017

Hi,
I'm just getting started with bootstrap-vue, so this might be something I'm doing wrong.

I'm using the code from https://bootstrap-vue.js.org/docs/components/navbar on my page. When I shrink the horizontal size if the page, so that it is displayed as on a mobile, click the hamburger menu, and then click any option I expected the navbar to toggle away. For the user it seems like nothing happens when clicking the menu item.

I went to getbootstrap.com to see how it behaved there, and it has the same behavior, so I'm guessing that Bootstrap and Bootstrap-Vue handles this in the same way.

How can I tell the navbar to de-toggle when the user clicks an item when in "mobile size"?

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 19, 2017

Hmmm that maybe in an issue with how they implement the collapse sub-component.

We might be able to get around this by adding a click handler on the collapse portion of the nav, but we would need to know which state the toggle is in.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 19, 2017

I think I have determined a method for handling this, by detecting the computed display mode of hte collapse when in is-navbar mode, and adding a click handler to the wrapper component of the collapse.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 19, 2017

I have another PR that tweaks the collapse component. Once it is merged I will work on this issue and hopefully have it available for release v0.19.0

@tmorehouse tmorehouse added this to the v0.19.0 milestone Jul 19, 2017

@Scalpel78

This comment has been minimized.

Scalpel78 commented Jul 19, 2017

Super, looking forward to testing that version.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 20, 2017

PR #714 should close the collapsable navbar when clicked.

While this deviates from the current bootstrap V4.alpha.6 behaviour, it does provide a better end user experience.

tmorehouse added a commit that referenced this issue Jul 21, 2017

@petr-buchin

This comment has been minimized.

petr-buchin commented Jul 29, 2017

@tmorehouse I see the typo in this merged PR:
https://github.com/bootstrap-vue/bootstrap-vue/pull/714/files#diff-e4db3a7cc0eb7e2a471aed3656287b6eR148

Method in line 148 has name handleReszie() while it is referenced in lines 166 and 174 as this.handleResize. I think the method name on line 148 should be fixed.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 29, 2017

This has already been fixed in the latest master via commit 19f498a

@petr-buchin

This comment has been minimized.

petr-buchin commented Jul 29, 2017

Oh, thanks :)

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 29, 2017

This feature will be available in release v0.19.0

@petr-buchin

This comment has been minimized.

petr-buchin commented Aug 10, 2017

@tmorehouse I updated to the new v0.19.0 release and this fix does not seem to work :(

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 10, 2017

Try release v0.20.0 (v0.19.0 had a few bugs in some components), and let us know

@petr-buchin

This comment has been minimized.

petr-buchin commented Aug 10, 2017

@tmorehouse still does not work.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 10, 2017

OK, looking into this...

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 11, 2017

@petr-buchin Try the updated v0.20.2 release (may still be bugs)

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Aug 11, 2017

This appears now to be working in version v0.20.2 in the official docs:

https://bootstrap-vue.js.org/docs/components/navbar

Jut make your browser window narrow in order to test it out.

@petr-buchin

This comment has been minimized.

petr-buchin commented Aug 13, 2017

@tmorehouse after update navbar is collapsed in desktop mode, though it should be collapsed only in mobile mode.

@talalzaki

This comment has been minimized.

talalzaki commented Nov 19, 2017

same here

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 19, 2017

@talalzaki which version of Bootstrap-Vue are you using?

The latest version is v1.1.0, which is based on Bootstrap V4.beta.2 CSS (the v0.xx.xx releases are now obsoleted)

@talalzaki

This comment has been minimized.

talalzaki commented Nov 19, 2017

i use 1.1.10 with tether 1.4.1 "bootstrap": "^4.0.0-alpha.6", like on https://jsfiddle.net/pi0/gfqucs0z/

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Nov 19, 2017

The alpha branch has been deprecated and is no longer supported. The last version of the Bootstrap-Vue alpha (Bootstrap-V4.alpha.6 CSS) branch is v0.23.1.

@talalzaki

This comment has been minimized.

talalzaki commented Nov 19, 2017

thanks its works with "bootstrap": "^4.0.0-beta.2",
"bootstrap-vue": "^1.1.0"

@saintplay

This comment has been minimized.

saintplay commented Feb 13, 2018

when I have a slot, clicking on the child doesn't close the toggle

<b-nav-item href="#hero" class="px-t-3">
   <span class="nav-link-text">
     start
   </span>
</b-nav-item>

Yes, it's absolutely necessary to have a span inside the b-nav-item

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