Normally I would be writing dropdown with select and option but somehow I came across to this by using bootstrap dropdown which uses anchor
Using a sample in bootstrap
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</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>
</div>
<button class="get-value-btn">Get value / text</button>
If I want to get the value when I click the Get value / text with jQuery how can I do it though? Normally with select, it's straight forward but I never done it this way.
Thanks in advance for any suggestions / advices.
Related
I'm using Bootswatch to make a navbar for my React project. I'm attempting to add a dropdown menu, but I can't get it to work when I click it. Here's the code I'm using:
<li className="nav-item dropdown">
<a className="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div className="dropdown-menu">
<a className="dropdown-item" href="#">Action</a>
<a className="dropdown-item" href="#">Another action</a>
<a className="dropdown-item" href="#">Something else here</a>
<div className="dropdown-divider"></div>
<a className="dropdown-item" href="#">Separated link</a>
</div>
</li>
This code is taken directly from the Bootswatch website. However, I've also tried changing the <a> tags to <Link> tags (and thus changing the href property to to). It shows the dropdown in the navbar, but clicking on it does nothing.
Hello guys this must be very simple but I am not able to figure it out.
I want href in some nav links that are in dropdown to change when the user navigates to any subpages of website and remain same when the user is on the homepage for example
when a user is on homepage (www.example.com) href should be
href="#div_id1"
and when the user goes to subpage e.g.=www.example.com/contactpage then
href="www.example.com#div_id1"
I am using dynamic header so can't use different navbar code on other page
below is my code
<li id="dropdownheading" class="nav-item my-auto dropdown">
<a class="nav-link dropdown-toggle " href="#" id="navbarDropdown"
role="button" ata-bs-toggle="dropdown" aria-expanded="false">
Dropdown heading
</a>
<ul class="dropdown-menu " aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#div-id1">div 1</a></li>
<li><a class="dropdown-item" href="#div-id2">div 2</a></li>
<li><a class="dropdown-item" href="#div-id2">div 3</a></li>
</ul>
</li>
I am using Angular 8, and I need to make a simple drop-down menu.
The design that I have is like this:
StackBlitz
But the only difference is that I don't want to use button-style, but need the chevron. Just a simple drop-down, where I can click on different links within that drop-down.
The thing I understood is, you need to remove the button style drop-down trigger and need to add a chevron icon instead.
I've added font-awesome css to the project by importing it to the styles.css file.
styles.css
/* Add application styles & imports to this file! */
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css")
app-component.html
<div class="container" style="margin-top: 10%">
<div class="btn-group" dropdown>
<span id="button-basic" dropdownToggle aria-controls="dropdown-basic">
<i class="fa fa-chevron-down"></i>
</span>
<ul id="dropdown-basic" *dropdownMenu class="dropdown-menu"
role="menu" aria-labelledby="button-basic">
<li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Another action</a></li>
<li role="menuitem"><a class="dropdown-item" href="#">Something else here</a></li>
<li class="divider dropdown-divider"></li>
<li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
</li>
</ul>
</div>
</div>
You can add any additional styles to the chevron as you like.
I am working on a website in which I want to show dropup-menu content completely when scroll bar is in effect.
At this moment, the dropup-menu content doesn't show up completely when we are scrolling up/down.
The css code which I have used in order to show the scroll bar is:
.dropdowns
{
overflow-y:auto;
height: 100px;
}
The html code which I have used in order to make the button is:
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
Here is the screenshot of the problem which I am facing:
As shown above, the dropup menu doesn't seem to have the full content. It is missing Action text.
Problem Statement:
I am wondering what changes I should make in the css codes so that I can see the complete dropup content when scroll up/down.
As stated above in the screenshot, dropup content is getting cut when scrolling up/down.
Edit 1: I want the scrollbar (having list of buttons) at the bottom to be there.
Edit: Sorry I didn't notice the scroll bar
Try to add something like this :
.btn-group.show {
position: absolute;
}
http://jsfiddle.net/pkg4zh68/14/
I'm using bootstrap 4.0 beta, which requires popperjs, which is v1.12.5 . jQuery is version 3.2.1, in jQuery.noConflict() mode. This is for a shopify theme, so to include javascript files it uses gulp-include directives in Shopify's Slate command-line tool. My include file looks like this:
// =require vendor/jquery-3.2.1.js
// =require vendor/popper.js
// =require vendor/bootstrap.min.js
When I try and use the Bootstrap Navbar dropdown toggle, I get the console error
Uncaught TypeError: Cannot read property 'jquery' of undefined
jQuery is working correctly in all the non-popper bootstrap functionality and custom jQuery javascript. However, jquery (with a lower-case q) is not defined when I type it in the console, but this is what popperjs uses on line 2325. If I edit the popperjs source and capitalize the q it still throws the same error.
For more context, You are getting this error because you are trying to use an invalid HTML element as your dropdown button. I got this error because i tried to use an anchor tag which had a button nested it, alongside the .dropdown-menu div
For example
This works
<button class="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="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
But this doesn't
<a class="dropdown">
<button class="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="#">Thing 1</a>
<a class="dropdown-item" href="#">Thing 2</a>
<a class="dropdown-item" href="#">Thing 3</a>
</div>
</a>
You are passing an invalid DOM element to Popper.js somehow, if you update Popper.js to the latest version you'll get a better error message.