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

When including a navbar dropdown in the "brand section", the dropdown is always open on mobile #1743

Closed
sugacube opened this issue Sep 5, 2019 · 7 comments · Fixed by #1746
Closed

When including a navbar dropdown in the "brand section", the dropdown is always open on mobile #1743

sugacube opened this issue Sep 5, 2019 · 7 comments · Fixed by #1746

Comments

@sugacube
Copy link

sugacube commented Sep 5, 2019 •
edited

Overview of the problem

Buefy version: 0.8.3
Vuejs version: 2.6.10
OS/Browser: Windows - Firefox & Chrome

Description

If you create a navbar dropdown inside the "brand" section of the navbar, on mobile it is shown on top as expected, but fully open in stead of being able to close/open. Also the text is rendered next to the item in stead of in a popup.

Rationale

bulma / buefy navbar items automatically hide on tablet or mobile. If you have 1 or 2 small dropdown menus there is however still place on a mobile to show the menu's (tablets will fit even more).
It is a workaround with bulma in this case to put the dropdown inside the "brand" section, so these will always remain on top, even on mobile.

This works perfectly for normal navbar items.

Steps to reproduce

  1. Create a navbar with some items containing icons in front of the text:
	<b-navbar>
		<template slot="brand">
			<b-navbar-item>
				[ your brand stuff ]
			</b-navbar-item>
			<b-navbar-dropdown label="Menu">
				<b-navbar-item tag="router-link" :to="{name: 'link'}">
				<b-icon icon="heart" size="is-small"></b-icon>
				Item
				</b-navbar-item>
			</b-navbar-dropdown>
		</template>
		<template slot="start">
		. . .
		</template>
		. . .
  1. resize screen to tablet / mobile version

Expected behavior

On mobile screen, dropdown "Menu" shown on top of screen which can be clicked open/close and selected.

Actual behavior

On mobile screen, always open dropdown is shown with menu items rendered next to it.

Remark

I'm not sure this should be classified as a but or as a feature request. Please re-classify if you desire.
@wanxe
Copy link
Contributor

wanxe commented Sep 5, 2019

Yes you're right, but while we look for a solution you can control the behaviour of the mobile menu programmatically with the is-active prop.

https://buefy.org/documentation/navbar#api-view

@wanxe wanxe mentioned this issue Sep 6, 2019
Merged
@sugacube
Copy link
Author

still same problem in 0.8.4
@wanxe is-active doesn't do anything when dropdown is inside "brand" in mobile mode.

@wanxe
Copy link
Contributor

wanxe commented Sep 20, 2019

Hello @sugacube could you provide us an working example? Thanks.

@sugacube
Copy link
Author 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
</head>
<body>
	<div id="app">
		<b-navbar>
			<template slot="brand">
				<b-navbar-item href="/">[ BRAND / ICON ]</b-navbar-item>
				<b-navbar-dropdown label="Dropdown">
					<b-navbar-item>Item 2</b-navbar-item>
					<b-navbar-item>Item 1</b-navbar-item>
				</b-navbar-dropdown>
			</template>
		</b-navbar>
	</div>

	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript"></script>
	<script src="https://unpkg.com/buefy/dist/buefy.min.js" type="text/javascript"></script>
	<script>new Vue({el: '#app' })</script>
</body>
</html>

renders like

image

@wanxe
Copy link
Contributor

wanxe commented Sep 22, 2019 •
edited

@sugacube I think that is not a Buefy problem, as you can see on the following codepen
example. Is just a Bulma CSS "problem". This slot, or class on this case, is designed by default to put your brand, not more items inside it. We just follow the guideline of this library.

jtommy added a commit that referenced this issue Sep 22, 2019
@jtommy
Revert #1743
5ce5a13
@sugacube
Copy link
Author

i see. makes sense. i guess i'll have to report this with bulma then.

LeoMouyna pushed a commit to LeoMouyna/buefy that referenced this issue Jan 6, 2020
@jtommy @LeoMouyna
Revert buefy#1743
542bb71
LeoMouyna pushed a commit to LeoMouyna/buefy that referenced this issue Jan 6, 2020
@jtommy @LeoMouyna
Revert buefy#1743
14c4051
@snyk-bot snyk-bot mentioned this issue Mar 8, 2020
Closed
@guestisp
Copy link

Bug still exists with latests versions of bulma and buefy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@guestisp @wanxe @sugacube