I'm trying to add a table in Vue. How can I create dropdown list inside each table row just like in an example below?
I have some dificulties with making a list position: 'absolute'.
Is there a component that can do this?
it can simply be solve by boostrap, add boostrap codes like this
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
according to your image it is simple a dropdown
Related
I have a Vue single-page-apps about a simple online bookstore. This project so far runs well except a tiny issue: When a login customer clicks 'logout' link on navbar, the system navigates him to the frontpage and 'logout' link becomes a 'register/login' link. This link should be a dropdown, but after navigating, this link doesn't work(no respond while clicking it) anymore until press F5 to reload the page from 'server'. Following is my navbar.vue
<template>
...
<!---Good Dropdown--->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownShowMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Showroom
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownShowMenuLink">
<router-link class="dropdown-item" to="/showBookList/newAddings">By Updates</router-link>
<router-link class="dropdown-item" to="/showBookList/authors">By Authors</router-link>
<router-link class="dropdown-item" to="/showBookList/categories">By Categories</router-link>
</div>
</li>
<template v-if="isLogin">
<li class="nav-item">
<a class="nav-link" id="logoutLink" href="javascript:void(0)" #click="logout">logout</a>
</li>
<template v-if="isAdmin">
<li class="nav-item">
<router-link class="nav-link" to="/admin">Dashboard</router-link>
</li>
</template>
</template>
<template v-else>
<!--Bad dropdown-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" id="navbarDropdownUserMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login/Register</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
<router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
<router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>
</div>
</li>
</template>
...
</template>
<script>
import configs from '#/configs'
export default{
...
methods{
async logout(){
let logoutURL = configs.serverURL + configs.serverPort + '/logout';
await this.$store.dispatch('logout', {logoutURL});
alert(this.$store.getters.currentMsg);
this.$router.push('/');
},
},
...
}
</script>
I figured out a simple way to work around:
use v-show rather than v-if to render bootstrap dropdown.
<li v-show="!isLogin" class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownUserMenuLink"
role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Login/Register</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownUserMenuLink">
<router-link class="dropdown-item" to="/loginForm">Sign In</router-link>
<router-link class="dropdown-item" to="/registerForm">Sign Up</router-link>
</div>
</li>
According to guidline of Vue2:
v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles. In comparison, v-show is much simpler - the element is always rendered regardless of initial condition, with CSS-based toggling.
I think sth wrong while re-creating "dropdown". Maybe someone can help me to figure out how to use "v-if".
I'm trying to start my own business and looking to save a bit of money by using a bootstrap 3 based template I purchased.
The menu on mobiles doesn't collapse when a menu item is chosen nor when someone clicks outside the menu. Apparently it's not supposed to which strikes me as wildly counterintuitive but there we go. How might I go about getting it to collapse when a subject is chosen OR someone clicks outside the menu, please? There are similar questions here but none of them have worked for me thus far. I'm probably doing something stupid though.
<nav class="navbar navbar-default">
<div class="row">
<div class="navbar-header col-md-3 col-sm-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-res"> <span class="sr-only">Toggle navigation</span> <span class="fa fa-navicon"></span> </button>
<!--======= LOGO =========-->
<div class="logo col-2"><img src="images/pdriving4.png" alt="" ></div>
</div>
<!--======= MENU =========-->
<div class="col-md-9 col-sm-9">
<div class="collapse navbar-collapse" id="nav-res">
<ul class="nav navbar-nav">
<li class="dropdown active"> Home </li>
<li class="dropdown"> About Paul</li>
<li class="dropdown"> Passed Gallery </li>
<li class="dropdown"> Courses </li>
<li>Contact</li>
<li class="dropdown"> FAQs </li>
<li class="dropdown"> Book Now </li>
</ul>
</div>
</div>
</div>
</nav>
after click in my single button ,the dropdown is under my datatables !
my code :
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>
</div>
If you want the dropdown to stay within your modal without adjusting the z-index you can align the dropdown the the right edge of your button using the class 'dropdown-menu-right' on the 'dropdown-menu' div:
<div class="dropdown">
<button type="button" class="btn btn-icon" aria-label="btnGroup" data-toggle="dropdown" >
<i class="icon icon-dots-vertical"></i>
</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="btnGroup">
<a class="dropdown-item" href="#">Modifier Contrat</a>
<a class="dropdown-item" href="#">Supprimer Contrat</a>
</div>
I am trying to get a series of controls positioned vertically and centered horizontally. The controls are coming out fine, but when I cause the dropdown to drop down, the dropdown text appears left justified on the screen rather than under the centered dropdown control. I've spend a couple of hours on it and I can't get it right. Help would surely be appreciated. Here is what I am using:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<input autocorrect="off" autocapitalize="off" spellcheck="false" type="text" id="xxx" style="margin-top:50px;">
</div>
You could solve this issue using css like i did here:
http://www.bootply.com/zck8H4EVt4
Just add this to your CSS:
.dropdown-menu {
left: 50%;
transform: translate(-50%, 0);
}
// EDIT:
Sorry, i've forgot about the btn-group class...
Just remove the CSS part from the first solution, add .btn-group to your dropdown and use .clearfix after your btn-group like i did here:
<div style="margin-top:50px; text-align: center;">
<div class="dropdown btn-group">
<button class="btn btn-primary dropdown-toggle" id="dropdownMenu1" aria-expanded="false" aria-haspopup="true" type="button" data-toggle="dropdown">Shift / Project2
<span class="caret"></span></button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a class="dropdown-item" href="#">HTML</a></li>
<li><a class="dropdown-item" href="#">CSS</a></li>
<li><a class="dropdown-item" href="#">JavaScript</a></li>
</ul>
</div>
<div class="clearfix"></div>
<input id="xxx" style="margin-top:50px;" spellcheck="false" type="text" autocapitalize="off" autocorrect="off">
</div>
Working example: http://www.bootply.com/lryEFqtmdp
Below is my code for showing a dropdown. In my code, if I remove class "dropdown-toggle" then also it works fine. So I am wandering what is the use of "dropdown-toggle" class?
<div class="container">
<div class="dropdown">
<button type="button" data-toggle="dropdown" class="btn dropdown-toggle">Options<span class="caret"></span></button>
<ul class="dropdown-menu">
<li role="presentation">Home</li>
<li class="active">About Me</li>
<li class="disabled">About Appirio Inc</li>
</ul>
</div>
</div>
Refer this link for more about dropdown-doggle : http://www.tutorialspoint.com/bootstrap/bootstrap_dropdown_plugin.htm