Issue
I am using Spectre CSS dropdown menus in a list and also putting badges on them dynamically using vue.js data binding. I am doing it by wrapping the div.dropdown
in a span
which conditionally has the badge
class. My problem is that the menu pane is hidden behind any button which has an active badge. I played around with the z-index on the ul.menu
but it has no effect. Anyone know what is the cause and/or how to fix it? And for extra credit... I noticed that when the active
class is on a dropdown button with a badge on it the badge is behind the button instead of in front of it, which seems wrong to me. It does not do that for a regular button only a dropdown one.
Here is the (stripped-down) html:
<div class="column col-2">
<template v-for="(o, i) in list">
<span :class="{badge: o.qty > 0}" :data-badge="o.qty">
<div class="dropdown dropdown-right">
<div class="btn-group">
<button class="btn" :class="{active: i == current}">
{{o.name}}
</button>
<button class="btn dropdown-toggle" :class="{active: i == current}" tabindex="0">
<i class="icon icon-caret"></i>
</button>
<ul class="menu">
<li class="menu-item"> ... </li>
...
</ul>
</div>
</div>
</span>
</template>
</div>
And here is a picture of the result:
Hmmm... seems there is no tag for Spectre CSS and I can't create one. Oh well.
Solution
Turned out to be an issue with z-index being set on elements that were supposed to be shown above avatar images and active buttons, which in spectre by default are at a higher z-index level. By changing our CSS to override those items back to z-index:auto, and removing our other z-index mods, the problem (actually both problems) is fixed.
Answered By - user9645
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.