Bulma dropdown disappears with Vue router

Question

Dropdown is working perfectly on normal pages.

But when I use Vue-router, which works like a SPA, the dropdown disappears between the navbar-item and its child navbar-link unless I move the cursor down very fast.

There are no gaps or margins in the html on the router page or between the router view and the nav. On normal web pages the transition between navbar-item to the dropdown menu is seamless. But on the router page, the dropdown disappears once the cursor moves off the inner tag which is boxed inside the outer div.

// outer tag
<div class="navbar-item has-dropdown is-hoverable">
    // inner tag
    <a class="navbar-link">More:</a>
</div>

setting a style="height: 100%" does not work to make the a tag fit fully inside the outer div

https://bulma.io/documentation/components/navbar/

You have a typo in your code. There is a colon after is-hoverable instead of a quotation mark. — Dawid Loranc
Correct, was just a typo in the example code. Meant to press " — Dazzle
ok, could you add snippet with reproduction of this bug? I don't think it's problem with vue-router, rather with styles or something, but I have too few data to give a good answer. You can play with top value of navbar-dropdown. — Dawid Loranc

Dazzle Dazzle · Accepted Answer · 2017-10-31T17:48:15

Fixed this by adding a line break <br> above the columns that had a child of vue-router.

Never over-complicate the simplicity of vue or bulma!

Bulma dropdown disappears with Vue router

1 Answers