Hi i am using a dropdown menu in a div, it is working, but if I put 2 on the same page and I click in the first it opens the first and the second at the same time. How can I handle this??
I have change data-toggle="dropdown" id="dropdownMenuButton" aria-labelledby="dropdownMenuButton" but nothing seems to work. I am new to using bootstrap
My first dropdown
<div class="dropdown">
<div href="#" class="form-control b-r" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></div>
<div class="dropdown-menu fadeInUp" aria-labelledby="dropdownMenuButton">
<label>Nº max</label>
<div class="row pb-4" >
<div id="controls" class="text-center">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="n_max" name="N_max" class="click select-form" readonly type="text" value="" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
My second dropdown
<div class="dropdown">
<div href="#" class="form-control b-r" id="dropdownMenuButton_2" data-toggle="dropdown_2" aria-haspopup="true" aria-expanded="false"><i class="fas fa-users"></i></div>
<div class="dropdown-menu fadeInUp" aria-labelledby="dropdownMenuButton_2">
<label>Nº max</label>
<div class="row pb-4" >
<div id="controls" class="text-center">
<div id="minus" class="btn btn-sm-click btn-info fa fa-minus pull-left"></div>
<input id="n_max" name="N_max" class="click select-form" readonly type="text" value="" >
<div id="plus" class="btn btn-sm-click btn-info fa fa-plus pull-right"></div>
</div>
</div>
</div>
</div>
The goal is when click on first open the first and vice verse
Thanks for the help
I found your problem,
on second dropdown you add
data-toggle="dropdown_2"
it will be
data-toggle="dropdown"
Related
I would like to add 2 buttons(fa-plus & fa-minus) just below every image. The buttons must stick with the image. I have added the code but the buttons are not sticked with the image. How I can do that? Is there any better logic to doing this? I'm having trouble understanding CSS and Bootstrap.
```
.image-card {
width: 45px;
height: 40px;
}
.image-card img {
width: 100%;
min-height: 100%;
}
```
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-3">
<div class="card">
<div class="card-body">
<div class="card mb-2 box">
<div class="card-body">
<div class="d-flex flex-row justify-content-center">
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="image-card">
<img class="p-1" src="https://i.stack.imgur.com/aFYTl.jpg?s=328&g=1" />
<div class="btn-group" role="group" aria-label="Basic mixed styles example">
<button type="button" class="btn btn-sm btn-success">
<i class="fa fa-plus" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-sm btn-danger">
<i class="fa fa-minus" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
enter image description here
.row2 {
display: flex;
align-items: center;
}
<div class="row">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
<div class="row2">
<textarea name="textareaAxs" ></textarea>
<a class="btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
Here some DOCUMENTATION
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"/>
<div class="container">
<div class="row">
<div class="col">
<a class="btn btn btn-success btn-block"><i class="fa fa-thumbs-up"></i>Ok</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="input-group">
<textarea class="form-control" name="textareaAxs" ></textarea>
<div class="input-group-append">
<a class="input-group-button btn btn btn-danger btn-block"><i class="fa fa-thumbs-down"></i>Cancel</a>
</div>
</div>
</div>
</div>
</div>
I need the following controls in one line and aligned right. I need the two icons appear inside the textbox at the right corner. And also both the controls to be aligned right.
Here is the Plunker
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
Bootstrap styles .form-control input elements as BLOCK (they are usually inline).
If you restyle that specific input element to inline-block and reduce the width a bit (unsure why that was necessary - perhaps only for SO snippet environment), you will be able to use margin-left on the span elements to walk them over a bit.
span.a1{margin-left:-50px;border:1px solid green;}
span.a2{border:1px solid red;}
#txtDateRange{display:inline-block;width:99.3%;}
div.a1 {display:inline-block;margin-left:-50px;border:1px solid green;}
div.a2 {display:inline-block; border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p> </p>
<div class="col-md-12">
<div class="col-md-6">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
<span class="a1"><i class="glyphicon glyphicon-remove" ></i></span>
<span class="a2 xform-control-feedback"><i class="glyphicon glyphicon-calendar xfa xfa-calendar"></i></span>
</div>
<div class="col-md-6" style="float: right;">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>{{ selectedItem ? selectedItem.Label : 'ALL LOCATIONS' }}</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li ng-repeat="Label in Summary.Locations">
<a ng-click="dropboxitemselected(Label)">
{{Label.Label}}
</a>
</li>
</ul>
</div>
</div>
You may do it like this:
.col-md-6{
float: right;
}
.wrapper{
overflow: hidden;
}
#txtDateRange{
width: 100%;
}
<div class="col-md-12">
<div class="col-md-6">
<span><i class="glyphicon glyphicon-remove" ></i></span>
<span class="form-control-feedback"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
</div>
<div class="wrapper">
<input type="text" id="txtDateRange"
class="form-control input-md" name="txtDateRange"
placeholder="Select Range"
ng-model="Model.RageDates" />
</div>
</div>
I am trying to make a dropdown menu, where you have to click before the dropdown menu shows up. But everytime I load the page, the dropdown menu also loads. I have really tried to look through my code, and I have a feeling it is in the start of the code.
Can anybody see what is wrong in this code?
<li class="dropdown">
<a class="dropdown-toggle" data-close-others="false" data-delay="0" data-hover=
"dropdown" data-toggle="dropdown" href="#">Feature <i class="fa fa-angle-down"></i>
</a>
<!--container start-->
<div class="login-bg">
<div class="container">
<div class="form-wrapper">
<form class="form-signin wow fadeInUp" action="index.html">
<h2 class="form-signin-heading">sign in now</h2>
<div class="login-wrap">
<input type="text" class="form-control" placeholder="User ID" autofocus>
<input type="password" class="form-control" placeholder="Password">
<label class="checkbox">
<input type="checkbox" value="remember-me"> Remember me
<span class="pull-right">
<a data-toggle="modal" href="#myModal"> Forgot Password?</a>
</span>
</label>
<button class="btn btn-lg btn-login btn-block" type="submit">Sign in</button>
<p>or you can sign in via social network</p>
<div class="login-social-link">
<a href="index.html" class="facebook">
<i class="fa fa-facebook"></i>
Facebook
</a>
<a href="index.html" class="twitter">
<i class="fa fa-twitter"></i>
Twitter
</a>
</div>
<div class="registration">
Don't have an account yet?
<a class="" href="registration.html">
Create an account
</a>
</div>
</div>
<!-- Modal -->
<div aria-hidden="true" aria-labelledby="myModal" role="dialog" tabindex="-1" id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Forgot Password ?</h4>
</div>
<div class="modal-body">
<p>Enter your e-mail address below to reset your password.</p>
<input type="text" name="email" placeholder="Email" autocomplete="off" class="form-control placeholder-no-fix">
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
<button class="btn btn-success" type="button">Submit</button>
</div>
</div>
</div>
</div>
<!-- modal -->
</form>
</div>
</div>
</div>
<!--container end-->
</li>
<!-- /li dropdown for login -->
</ul>
<!-- /ul for navigationbar -->
</div>
</div>
</header>
<!--header end-->
Below is standard code from bootstrap you can use it for your dropdown.
<ul>
<li class="dropdown">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Feature <i class="fa fa-angle-down"></i>
</a>
<!-- your dropdown container start-->
<div class="login-bg dropdown-menu" aria-labelledby="dLabel">
<div class="container">
<!-- your html code can be here -->
</div>
</div>
</li>
</ul>
Hope it help you to solve your problem.
If you still have query please post your proper html or create fiddle / bootply snippet here
I have this html code and I'm trying to align some buttons with first input group section.! See atached picture.
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>Phone</label>
<div class="input-group">
<select class="form-control input-xs" name="selectbasic" id="selectbasic1">
<option>Option one</option>
<option>Option two</option>
</select>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
</span>
</div>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
<a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
</div>
</div>
</div>
Wrong rendering :
How can I align my buttons from second and third col-md- with first col-md-??? The problem is that the first col-md- section has a select with label ...
You are overcomplicating it. If you want them to be in line with the other buttons, then they should be in the same group col as your other buttons, and then just work some padding magic to make them separate from each other. http://bootply.com/83379 for a working example. Code below:
CSS
.input-group-btn:nth-of-type(2) {
padding:0 20px;
}
HTML
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Phone</label>
<div class="input-group">
<select class="form-control input-xs" name="selectbasic" id="selectbasic1">
<option>Option one</option>
<option>Option two</option>
</select>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-plus-sign-alt icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-eye-open icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-ok-sign icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-remove icon-xs"> </i></a>
</span>
<span class="input-group-btn">
<a class="btn btn-info btn-xs"> <i class="icon-phone icon-xs"> </i></a>
<a class="btn btn-info btn-xs"> <i class="icon-phone-sign icon-xs"> </i></a>
</span>
<a class="btn btn-info btn-xs"><i class="icon-plus-sign-alt"> </i>Alert</a>
</div>
</div>
</div>
</div>
UPDATE: IE8 Support
IE8's support for nth-of-type is apparently suspect, so if you wanted to ensure support, we can change that CSS rule to be a class, and then add it to the <span> with the two buttons in it.
CSS
.input-group-btn-padding {
padding:0 20px;
}
See http://bootply.com/83596 for a working example.
Can't you use an extra class with margin-top with the form-group?