<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Material Type
</a>
<div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
<a class="dropdown-item">Mud</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cloth</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Thread</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Jute</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cotton</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Cane</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item">Bamboo</a>
</div>
</li>
Can I get the value from the menu after selecting like following?
var email=document.getElementById('signUpEmail').value;
So that I can use this variable in ajax.
Edit
As #Timir suggest to use select then the menu is look like
<li class="nav-item">
<select class="custom-select custom-select-lg mb-3" id="mydropdown">
<option selected>Material Type</option>
<option value="Mud">Mud</option>
<option value="Cloth">Cloth</option>
<option value="Thread">Thread</option>
<option value="Jute">Jute</option>
<option value="Cotton">Cotton</option>
<option value="Can">Can</option>
<option value="Bamboo">Bamboo</option>
</select>
</li>
Can I get the value from the menu after selecting like following?
No, there are no input to retrieve their value.
but you can get the text inside the link like
$('.menu2 a.dropdown-item').on('click', function(){
$(this).text()
});
Turn it into a select, give it an id, then say:
$(“#mydropdown option:selected”).val();
There are workarounds for basically everything in JavaScript. Including this. Without using JQuery, you could add an event listener, or you could make an onlick within each option or anchor tag.
When you click on the drop down and set the option, it calls the function which sets the variable. So even though there is no input box... you are just setting a global variable. And then you utilize that variable as a part of a form or however you plan on using it.
Related
I want to make a dropdown which is clickable also. Like I have a menu which has dropdown options so If I hover on it, will display dropdown and if I want to click on that, it should display link that has been provided to it.
This is the HTML:
<ul class="navbar-nav ml-auto nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="mainservice.html" id="navbarDropdown" role="button" aria-expanded="false"> Logistics Services </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="ftl.html">FTL</a>
<a class="dropdown-item" href="ltl.html">LTL</a>
<a class="dropdown-item" href="intermodal.html">Intermodal</a>
</div>
</li>
</ul>
So, now I want that if I click on Logistics Services then mainservice.html page should display and dropdown should also be there. It should be mobile friendly also.
I tried through CSS, but when I checked it on mobile, then it is not working as expected.
ul.nav li.dropdown:hover div.dropdown-menu{
display:block;
}
How should I do it?
I use bootstrap 4 I would like my field to always grow down. Never up, no matter what half the screen is in the form select.
How to achieve this effect? I tried to use this data-dropup-auto="false" but to no avail.
The desired effect
Side effect
My form example:
<!-- form -->
<tr>
<th></th>
<td>
<select name="city" class="form-control bg-white text-dark" data-dropup-auto="false" id="id_city">
<option value="" selected>Choose your city...</option>
<option value="1">Chorzów (3)</option>
<option value="2">Katowice (3)</option>
<option value="3">Diffrent (4)</option>
<option value="4">Mallorcowo (3)</option>
<option value="5">Milaberalinto (4)</option>
<option value="6">Kalineskow (2)</option>
</select>
</td>
</tr>
<!-- end form -->
You are using a native select element, and thus you have no control over its display.
The browser automatically determines how to display it, based on its position relative to the viewport.
The only way to control this is to use a custom dropdown list that works with JavaScript and not with the native select HTML element.
Bootstrap provides this kind of custom dropdown and has some options that will help you achieve what you want: https://getbootstrap.com/docs/4.0/components/dropdowns/#options (what you need is to set the boundary option to window)
I wanted to tackle this problem with CSS alone.(A hack actually :))
Bootstrap's dropdown's uses Popper.js for the positioning of the drop-down menu. This makes the task challenging since Popper.js seems to check and evaluate the position of the dropdown when the window is scrolled so I needed to use an !important rule to override Popper.js.
Here's the code I came up with.
.dropdown-menu{
transform: translate3d(5px, 35px, 0px)!important;
}
.dropdown{
margin-top:900px;
}
.dropdown-menu{
transform: translate3d(5px, 35px, 0px)!important;
}
**Working snippet**
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
This will always force the drop-down to be below the button, even if the button is at the bottom of the screen.
Any ideas what might be causing this error?
List of my includes:
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
<script src="../../node_modules/semantic-ui/dist/semantic.min.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../node_modules/moment/min/moment.min.js"></script>
<script src="../../node_modules/fullcalendar/dist/fullcalendar.min.js"></script>
HTML Element:
<div class="ui floating dropdown labeled search icon button" style="width: 95%; margin: 0 auto;" id="monthDrop">
<i class="calendar icon"></i>
<span class="text">Choose a Month</span>
<div class="menu">
<div class="item">January</div>
<div class="item">February</div>
<div class="item">March</div>
<div class="item">April</div>
<div class="item">May</div>
<div class="item">June</div>
<div class="item">July</div>
<div class="item">August</div>
<div class="item">September</div>
<div class="item">October</div>
<div class="item">November</div>
<div class="item">December</div>
</div>
</div>
Script:
$('#monthDrop').dropdown();
It renders fine and everything and no errors on load, just this when I try to click on it:
We ran into the same error with the following html:
<select class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" role="button" v-model="selected" aria-haspopup="true" aria-expanded="false">
<option disabled value="">Please select one</option>
<option class="dropdown-item" value="type1">Carrier</option>
<option class="dropdown-item" value="type2">Shipper</option>
</select>
We tried removing data-toggle="dropdown" from the <select> tag; the error no longer occurred, and the dropdown menu still functioned. Not sure why this works, but it got rid of the error for us. Must be a conflict somehow? Anyways, if someone else is looking for a solution, this workaround may work for them.
I got this same error in Bootstrap 4.x because my dropdown menu did not have the same parent as the dropdown button I was using.
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
This does not work because the dropdown.js code looks for the menu using this code:
_getMenuElement() {
if (!this._menu) {
const parent = Dropdown._getParentFromElement(this._element)
if (parent) {
this._menu = parent.querySelector(SELECTOR_MENU)
}
}
return this._menu
}
To fix this, move the menu so it has the same parent as the toggle.
<span class="project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</span>
CSS Frameworks
First of all you have to choose whether you're using Bootstrap 4 or Semantic-UI, because these are two different CSS Frameworks and using both of them is a mess.
Bootstrap 4
Assuming you choose Bootstrap 4 as it's simpler and easier to learn especially for the beginners (but of course you can choose Semantic-UI, Foundation or any other if you'd like) you should have these two scripts inside your code: jQuery and Popper.js.
From Bootstraps Documentation:
Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
Dropdown
Again, as you can find in docs:
Dropdowns are built on a third party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
When you decide which CSS Framework you'd like to use you'll be able to set your Dropdowns in a proper way. Just to have better point of view you should also look into Semantic-UI Documentation about Dropdown.
NodeJS Environment != Browser JavaScript Environment
As I can see you install your scripts through npm, but I'm now sure if it is intended by you. In shorthand:
npm is a package manager for Node.js packages
I'm guessing that what you're trying to do is to have simple versions of these packages just in your local folders like ./project_name/javascript/bootstrap.js or ./project_name/css/bootstrap.min.css and there's no need for you right now to have node_modules. But, again, of course you can have it like this if you'd like.
You can find a lot of useful comments about Node and JavaScript here.
The error happens because you are misplacing the elements. None of the answer above solved for me.
Wrong placement 1
<span class="project-sort-by">Sort by: <a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a></span>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
Wrong placemement 2
<span class="project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</span>
Right placement
<span class="dropdown project-sort-by">Sort by:
<a class="dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Recent</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</span>
Removing data-toggle="dropdown" did not work for me as Bootstrap 4.x requires that for dropdown menus.
However in a similar issue, I figured that the third party plugin I used had a removed function called removeAttr. When I changed it with prop I worked. No more error.
Keep the semanticUI link below the bootstrap one
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../node_modules/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" href="../../node_modules/fullcalendar/dist/fullcalendar.min.css">
I have searched through all of the questions related to this that I can find and I just can't seem to make the text change.
Here is the dropdown in question:
Marketsource
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
<a class="dropdown-item" id="101" onclick="setStoreType(101);" >Office Deopt</a>
<a class="dropdown-item" id="102" onclick="setStoreType(102);" >Office Max</a>
<a class="dropdown-item" id="103" onclick="setStoreType(103);" >Staples</a>
<a class="dropdown-item" id="104" onclick="setStoreType(104);" >Costco</a>
</div>
</li>
I included the part for the navbar because the way I have it setup currently doesn't seem to quite match any of the examples I have seen.
Javascript that I have right now (I've gone through quite a few variations on something similar):
//Dropdown toggle
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
Can someone assist me with my issue? It's not super important but it's something that would give this webapp a little more responsiveness.
Thank you!
EDIT:
I realize it's been a little bit since I asked this, but I still haven't been able to get it to work. I put the two files that are needed into a Github Gist here:
JS: https://gist.github.com/ChristopherBare/bd29ba9bc4ffea9953c3039acc03f81d
HTML: https://gist.github.com/ChristopherBare/b2770b00881b978af3b666ba67c0e4b1
I don't know whats going on with it. If someone can just look over the files and tell me where I went wrong, that would help tremendously.
P.S. There are a couple functions in the JS that don't really do anything yet because they aren't done. So just ignore that for now.
The issue is here:
$(this).closest('.dropdown-item').children('a').text($(this).text());
and th html is like:
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100" onclick="setStoreType(100);" >Best Buy</a>
here .dropdown-item is under .dropdown-menu and you are using closest() selector, which search for the DOM upwards. Instead of closest try find() and also remove .children('a') as .dropdown-item is itself an anchor.
Not sure if this is what you are looking for but you could do it simply without that extra setStoreType function.(though I am not sure what you are trying to do with that function so i skipped it.)
If you wanted to the id as the store type and not the text inside the link I can add that later.
//Dropdown toggle
/*
$(".dropdown-menu a").click(function(){
$(this).closest('.dropdown-item').children('a').text($(this).text())
});
*/
function setStoreType(){
}
//Dropdown toggle
$(".dropdown-item").on("click", function(){
$("#StoreType").text($(this).text());
});
.dropdown-item:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="nav navbar-nav">
<!--First Dropdown - This needs to be fixed. Should change the text when clicked to the store that was selected.-->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdown01" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><span id="StoreType">Store Type</span></a>
<div id="dropdownStore" class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" id="100">Best Buy</a>
<a class="dropdown-item" id="101">Office Deopt</a>
<a class="dropdown-item" id="102">Office Max</a>
<a class="dropdown-item" id="103">Staples</a>
<a class="dropdown-item" id="104">Costco</a>
</div>
</li>
I still haven't found an answer to this issue. I have posted some github gists so that all of the code is there. It is something to do with jQuery not working properly, or possibly the way that I have my dropdown formatted?
I have a dynamically created set of bootstrap-select widgets I'm making with a dropdown. My issue is that to have the select not close the dropdown I have to put a 'event.stopPropagation()' on the dropdown itself.
When I do this the bootstrap select doesn't open when clicked, but a normal select will work. Is there a way to get the bootstrap select to work within a bootstrap dropdown where stopPropagation() is called on the dropdown click event?
Edit:
Example JsFiddle Test App
https://jsfiddle.net/ChaseRLewisAlamode/r4k5cy9s/1/
HTML
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Manage Statuses <span class="caret"></span>
</button>
<ul class="status-dropdown dropdown-menu" role='menu'>
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Always Visible <span class="caret"></span>
</button>
<ul class="visible-dropdown dropdown-menu" role='menu' style="display: block;">
<li role='presentation'>
<div class='status-item'>
<div class='status-text'>My Status</div>
<select class='selectpicker'>
<option value='active' selected>Active</option>
<option value='pending'>Pending</option>
<option value='sold'>Sold</option>
<option value='inactive'>Inactive</option>
</select>
</div>
</li>
</ul>
</div>
javascript
$(".status-dropdown").on('click',function(e){
e.stopPropagation();
});
I'd recommend reading this question that is very similar.
Angular js stop propagation from Bootstrap "dropdown-toggle" event
Since you didn't post any code, I'm assuming that your problem is fairly similar. If my answer is way off base, you could help me refine it by posting in-code examples of the phenomenon you're curious about.
For your benefit, I'll try paraphrasing it here:
When you click select, I predict that two things happen.
First is that it opens Bootstrap dropdown menu. Second, the event propagates to the parent element and also triggers something like 'showDetails = !showDetails'.
The obvious solution is to try to stop event propagation with $event.stopPropagation() on the td level, so that event doesn't bubble up the DOM tree and never triggers parent ngClick. Unfortunately, it will not work because Bootstrap sets up click event listener on the document element to benefit from bubbling, so you can't stop propagation.
Assuming that's what's happening, I'd recommend that you check this example out:
Javascript:
$("#orgchart").jOrgChart({ chartElement: '#chart' });
$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) {
e.stopPropagation();
$(.'dropdown-menu').toggle();
});
HTML:
<div id="chart">
</div>
<ul id="orgchart" style="display:none;">
<li>Test
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Actions
<span class="caret"></span>
</a>
<ul class="dropdown-menu" style="text-align:left;">
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
<ul>
<li>Test1.1</li>
<li>Test1.2</li>
</ul>
</li>
</ul>