When I try to make a dropdown for some odd reason when its clicked the dropdown menu displays off the page and I cant even see it in my actual website but JSFIDDLE shows it off the screen. Here is the JSFIDDLE where I was testing.
Click here for JSFIDDLE
Here is what I am currently doing.
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle" href="#">Applications<b class="caret"></b></button>
<ul class="dropdown-menu">
<li>My Applications</li>
<li>Staff Dashboard</li>
<li>Apply</li>
</ul>
Thanks for the help in advance.
There are some problems in your code.Like missing div, tabindex etc.I fixed it up and check whether it helps you-
<div class="dropdown">
<button class="btn btn-default dropdown-toggle"
type="button" id="menu1" data-toggle="dropdown">Applications
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
My Apllications</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">
Staff Board</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Apply
</a>
</li>
</ul>
</div>
Working fiddle- http://jsfiddle.net/vashuStrPro/6p0ux8st/
You need a parent element with the position property not set to static, i.e. to either relative, absolute, or fixed. The dropdown is using an absolute position with top:100%, so if there is no parent item with a position set, then it will use the window element as its reference, hence why it opens at the bottom of the page. Just set the immediate parent of the <ul> to have the position set.
Check out the updated jsfiddle.
Related
I'm having trouble with bootstraps tabs and tabpanels not working with the active class as intended. I know there are many questions about this, but in all the ones I have read, adding and removing the inactive class is not working at all. In my case, it works... but kind of. First I'll provide the HTML:
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link active" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
</div>
</div>
The JavaScript comes from just including all the bootstrap 4 stuff.
So here's the thing, it starts off with some issues, being that as you click between the 3 tabs it will usually show 2 of them, but after clicking around for about 10 seconds it seems to fix itself and work completely as intended, showing only the content for the currently selected tab. I also use the same exact code with different names in other locations on my site, and it works perfectly fine.
Does anyone have any intuition into what would be causing the content to show incorrectly only the first 10 or so times clicking through the tabs, but then it works perfectly well until the page is refreshed?
First of all you have to apply active class properly.You have given active class to a link but it should be into li.nav-item and also in your nav items you have given your active class to #b-tab and in below given active class to a-tab content. Look at updated HTML code
<ul class="nav nav-pills hr-divider-content hr-divider-nav">
<li class="nav-item active">
<a class="nav-link" data-toggle="pill" href="#a-tab" aria-expanded="false">A</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#b-tab" aria-expanded="true">B</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="pill" href="#c-tab" aria-expanded="false">C</a>
</li>
</ul>
<div class="tab-content">
<div id="a-tab" class="tab-pane highlight active" aria-expanded="true">
a-tab content
</div>
<div id="b-tab" class="tab-pane highlight" aria-expanded="false">
b-tab content
</div>
<div id="c-tab" class="tab-pane highlight" aria-expanded="false">
c-tab content
</div>
</div>
I think there was a bug in the initial Bootstrap 4 code, I was using Bootstrap 4.0.0 beta when I encountered this issue. I downloaded Bootstrap version 4.1.3 and now the active class gets removed from the tab-pane as expected.
I've seen several posts similar to this, but none of the solutions worked. I have a drop-down menu on my navigation. The nav looks like this
<ul>
<li role="presentation" class="dropdown">
Insurance <span class="caret"></span>
<ul class="dropdown-menu">
<li>Insurance</li>
<li>Home</li>
<li>Boat</li>
<li>Health</li>
</ul>
</li>
<li class="navdivider"></li>
<li role="presentation">
Customer Service
</li>
<li class="navdivider"></li>
<li role="presentation">
Claims
</li>
</ul>
When I click on the drop-down menu it shows up fine. When I click out of it or click the 'Insurance' link on the navigation the option on the navigation disappears. I get
<li role="presentation" class="dropdown" style="display: none;">
<a href="insurance.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
I've seen this same error posted elsewhere and I'm aware that it is a conflict with jquery & bootstrap, but I can't seem to fix it using the suggested fixes. I am not trained in javascript, so I'm unsure if I implemented incorrectly. Thank you.
I fail to understand why href is not working on a tag for data-toggle="dropdown" . When I hit the Lists tab, i should be routed to the google website.
FIDDLE HERE
Simple HTML:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
From Bootstrap documentation (http://getbootstrap.com/javascript/#dropdowns):
To keep URLs intact with link buttons, use the data-target attribute
instead of href="#".
So your code should be
<a data-target="http://www.google.es" target="_blank" href="http://www.google.es" class="btn btn-default dropdown-toggle">Lists</a>
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
Futhermore, you can find more information about how to get menu dropdown using hover instead of click: How to make twitter bootstrap menu dropdown on hover rather than click
A simple jQuery solution:
$('#menu-main > li > .dropdown-toggle').click(function () {
window.location = $(this).attr('href');
});
But the better solution is to replace the data-toggle attribute with data-hover
So your final code will be:
<div class="btn-group">
Lists
<ul class="dropdown-menu" role="menu">
<li>
Sub List 1
</li>
<li>
Sub List 2
</li>
</ul>
</div>
Remove: data-toggle="dropdown"
It's work for me.
So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>
To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.
If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.
When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".
If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.
For example, clicking on:
Data
Will cause the page to jump to:
<div id="graphOneData"></div>
To stop this happening, either change the id of the div or the href of the anchor.
I'm working on a search area and have decided to use the dropdown feature of bootstrap's framework.
What I aim to achieve is this:
A user types something, then another function parses the results.
I call a function or something that triggers that dropdown events.
If I just trigger the class responsible for the dropdown menu visibility, the rest of the functionality doesn't work (for instance, the keyboard navigation on the dropdown list items).
On the other hand, if I follow the documentation, and add: data-toggle="dropdown" to the input element
Then each click / focus on the input shows the dropdown, which is not what I want, I want to trigger it on my own.
Here's the HTML (couldn't create a working fiddle):
<div id="search-field" class="custom-dropdown">
<input class="form-control input-sm" id="global-search-input" data-toggle="dropdown" maxlength="255" name="top-search" placeholder="Global Search" tabindex="1" />
<ul class="dropdown-menu" role="menu" aria-labelledby="global-search-input">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
</ul>
</div>
Maybe you want something like Typehead.js, that display dropdown for actions check the
Typehead example