I have created a modal and in the modals body I want to add a dropdown button.
But for some reason the drop down is in the complete wrong place and I have tried over writing it in the css but to no avail
I tried this first
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2 align="left"><img src="/pic"width="50px" height="50px" />Share</h2>
</div>
<div class="modal-body">
<input type="textarea" align="left" id = "shareSearchBar" placeholder ="" name = "search">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="pic2"width="20px" height="20px" />Edit
<span class="caret"></span>
</button>
<ul class="dropdown-menu " aria-labelledby="dropdownMenu1">
<li><img src="/pic"width="20px" height="20px" />E</li>
<li><img src="/pic"width="20px" height="20px" />V</li>
</ul>
</div>
With my css trying to move the button in the correct position which it does.
#dropdownMenu1 {
position: absolute;
top: 35%;
right: 3%
}
.dropdown {
position: absolute;
top: 35%;
right: 0%
}
Then I tried the follwoing which is very similar but a bit different
<div class="modal-body">
<button type="button" id = "dropdownMenu1" class="btn btn-small btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<img src="/pic"width="20px" height="20px" />Edit
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><img src="/pic"width="20px" height="20px" />e</li>
<li><img src="/pic"width="20px" height="20px" />v</li>
</ul>
</div>
</div>
Same css...
I really can't see anyway about this.
#hat_to_the_back: here is updated the fiddle that #Drinking People made.. fits what you want to do:
https://jsfiddle.net/Jyde/hcgd9u43/2/
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="/pic"width="20px" height="20px" />Edit <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><img src="/pic"width="20px" height="20px" />e</li>
<li><img src="/pic"width="20px" height="20px" />v</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
Can you reinitiliaze your dropdown on show event of model. Something like this :
$('#mymodal').on('shown', function() {
$("#mydropdown").dropdown();
});
And remove your custom css.
Event and initiliaze syntax can change according to the version of bootstrap.
Related
<div class="input-group">
<div class="input-group-btn addon-button" toggle-dropdown>
<button type="button" class="button-m button-default dropdown-toggle http-button copyInput" data-toggle="dropdown" style="border-right:none !important;">
<span id="addresstype" class="custom-input">Http://</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-m dropdown-menu-m-small custom-dropdown-withInput w-100 p-0">
<li id="Http://">
Http://
</li>
<li id="Https://">
Https://
</li>
</ul>
</div>
</div>
What javascript code or directive to be used?
I'm trying to build a dropdown that functions like in the image below (or go to kayak's website):
I need a dropdown field within the dropdown field, and then I need a couple of fields that allow incrementing/decrementing.
I couldn't even get a dropdown within the dropdown to work right. I tried variations of the following:
I've tried variations of:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<form>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
</form>
</div>
I didn't even know where to begin for the increment parts of each text field.
Any thoughts on how to do this?
UPDATE: I can't keep the main dropdown open to be able to click on the dropdown or increment/decrement field within the main dropdown. The main dropdown just closes on me. Below is my latest code:
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" id="menu1" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li>
<div class="dropdown form-group clearfix">
<button class="btn btn-dropdown dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Fare Class
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Economy</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">Business</a></li>
<li role="presentation" class="mas10px"><a role="menuitem" href="#">First</a></li>
</ul>
</div>
<div class="container">
<h2>Bootstrap Counter Field</h2>
<div class="row">
<div class="col-sm-3">
<div class="input-group">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" disabled="disabled" data-type="minus" data-field="quant[1]">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>
<input type="text" name="quant[1]" class="form-control input-number" value="1" min="1" max="10">
<span class="input-group-btn">
<button type="button" class="btn btn-default btn-number" data-type="plus" data-field="quant[1]">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
I am making a simple webpage that is acting as a front-end for a SQL database. I have not added any custom CSS or any custom code other than plain Bootstrap elements. The dropdown items are not aligned and appear to the right of the actual dropdown button. Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>No Fail Sales Database</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
function showAbout(){
$('#aboutModal').modal('toggle');
}
</script>
<link href="bootstrap.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<!--------------- BEGIN ABOUT MODAL ---------------------->
<div class="container" align="center">
<div id="aboutModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">About Us</h4>
</div>
<div class="modal-body">
<p class="lead">This site contains a front-end interface for our project: No Fail Sales</p>
<p class="lead">Project Members: Anthony Bonarrigo, Brian Keiran, Cesar Nascimento</p>
</div> <!--END BODY-->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--END FOOTER-->
</div>
</div>
</div>
</div>
<!------------------------- END ABOUT MODAL --------------------->
<!------------------------ BEGIN JUMBOTRON/HEADER --------------->
<div class="jumbotron" id="db_header">
<div class="container">
<h1 style="text-align: center">No Fail Sales</h1>
<p style="text-align: center">A UI for database for No Fail Sales
<br><br><br><button type="button" class="btn btn-default" onclick="showAbout()">About</button></p>
</div>
</div>
<!------------------------END JUMBOTRON ------------------------>
<!------------------------BEGIN INPUT FIELDS--------------------->
<div class="container">
<div class="row">
<div class="col-xs-4">
<h2 style="text-align: center">Query by Product</h2>
<div class="input-group">
<input method="GET" type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<div id="q_seller" class="col-xs-4" align="center">
<h2 style="text-align: center">Query by Seller</h2>
<div class="input-group">
<input method="GET" type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
<!-----------------END INPUT FIELDS-------------------->
<!-----------------GENERATE THE DROPDOWN--------------->
<div class="col-xs-4" align="center">
<h2 style="text-align: center">Search by Category</h2>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">
Category
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="categoryDropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Clothing</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Electronics</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cleaning Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Office Supplies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Sports Equipment</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Health and Beauty</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Jewelry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Automotive</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Food and Drink</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Lawn and Garden</a></li>
</ul>
</div>
</div>
<!----------------END DROPDOWN---------------------->
</div>
<!--------------------END INPUT AREA------------------->
</div>
<!--Placed at end of page so it loads faster-->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
</body>
</html>
Your dropdown <div> is expanding to the full with of its containing column while the dropdown-toggle is not, causing the dropdown-menu to align with the column instead of the button. This solution isn't general but I think it best for a quick fix like yours:
CSS:
.dropdown {
width: 100px;
}
.dropdown .dropdown-toggle {
width: 100%;
}
or
HTML:
<div style="width: 100px;" class="dropdown">
<button style="width: 100%;" class="btn btn-default dropdown-toggle" type="button" id="categoryDropdown" data-toggle="dropdown" aria-expanded="true">
Hi guys I know its a simple thing but I'm having trouble making this work. Slidedown on click/touch for the nav, the slideUp function isnt working any help? Thanks
Some Code
<div class="nav-container">
<div class="nav nav-pills nav-stacked">
<ul class="nav nav-pills nav-stacked">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Is Landscape Architecture Right For Me?</a>
<ul class="dropdown-menu">
<li>What Is Landscape Architecture?</li>
<li>What Skills Do I Need?</li>
<li>Future Career Prospects (U.S. Labor Department)</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">What Do Landscape Architects Do?</a>
<ul class="dropdown-menu">
<li>Interviews With Leading Landscape Architects</li>
<li>ASLA Professional Awards</li>
<li>ASLA Student Awards</li>
<li>Buy the Book: <em>Becoming A Landscape Architect</em></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Why Is Their Work So Important?</a>
<ul class="dropdown-menu">
<li>Designing Our Future: Sustainable Landscapes</li>
<li>ASLA Animations</li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">Where Can I Study?</a>
<ul class="dropdown-menu">
<li>Picking A School</li>
<li>Design Intelligence Rankings (2013)</li>
</ul>
</div>
</div>
</div>
Jquery
$(document).ready(function(e) {
$('.nav-pills ul li').on('click touchstart', function() {
$(this).children('ul').stop().slideDown(500);
});
$('.nav-pills ul li ul').on('click touchstart', function(){
$(this).children('ul').stop().slideUp(300);
});
});
2nd part of my question is if I can hide tooltips on tablets (ipad) currently a user would have to click for the tooltip then click again to launch the modal
Some Code
<div class="modal-container0">
<button class="btn btn-primary btn-lg top" data-toggle="modal" data-placement="top" data-original-title="About Columbus Circle" data-target="#myModal_0"><span class="glyphicon glyphicon-plus"></span></button>
<div class="modal fade right" id="myModal_0" tabindex="-1" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel">About Columbus Circle</h4>
</div>
<div class="modal-body">
<img src="img/0173ColCir_062_c_before.jpg" class="img-responsive"/>
<p>Columbus Circle is an awesome project</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!--End Modal 1-->
</div><!--End.modal-content-->
</div><!--End.modal-dialog-->
</div>
Jquery
$(function(){ $('.top').tooltip();});
Also here is a link to the site I'm working on asla.org/yourpath
Thanks so much!
My task is to achive the functionality, when I click on a button, then it add a full row, which is achived by me by .clone() method. Now I want to delete this. When I click on cross button, then only remove that line. As shown in image:
When I click on cross, then remove that line. My code is:
$(document).ready(function () {
$("button#add").click(function(){
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".glyphicon-remove").click(function () {
$(".abcd:last").remove();
});
});
html:
<div class="wrapper">
<div class="form-group abcd" id="abcde">
<div class="col-sm-12" >
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">All days
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday</li><li class="week">Tuesday</li>
<li class="week">Wednesday</li><li class="week">Thusday</li>
<li class="week">Friday</li><li class="week">Saturdayy</li>
<li class="week">Sunday</li>
</ul>
</div>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<label for="exampleInputEmail1"> to </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Time
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="week">Monday-saturaday</li>
</ul>
</div>
<label for="exampleInputEmail1"> : </label>
<div class="btn-group week">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">.00
<span class="caret"></span>
</button>
<ul class="dropdown-menu" style="height: 10em;width:2em; overflow: auto;">
<li class="">.00</li><li class="">.01</li>
<li class="">.02</li><li class="">.03</li>
<li class="">.04</li><li class="">.05</li>
<li class="">.06</li><li class="">.07</li>
</ul>
</div>
<span class="glyphicon glyphicon-remove"></span>
</div>
</div>
</div>
</form>
<button type="button" id="add" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Add</button>
<button type="button" id="remove" class="btn btn-default dropdown-toggle" data-toggle="dropdown">remove</button>
I am able to add New line by click on add button, but unable to hide that line by click on cross.
Note: remove only that line, which line cross button is selected.
First, you'll need to change your clone to that :
$(".abcd:last").clone(true).appendTo(".wrapper");
Passing true mean that it is cloning events as well.
Then, in your remove function, you'll need to use this keyword. this will be the button clicked. You can then use DOM traversal method like closest to remove your row :
$(".glyphicon-remove").click(function () {
$(this).closest(".abcd").remove();
});
Alternatively, you can bind the event to the container like this:
$(document).ready(function () {
$("button#add").click(function () {
$(".abcd:last").clone().appendTo(".wrapper");
});
$(".wrapper").on('click', '.glyphicon-remove', function () {
$(".abcd:last").remove();
});
})