I am using the Bootstrap library and when I click the dropdown-toggle class this will show/hide the dropdown as expected (hence why its called toggle).
If I click the the image at the bottom of the HTML snippet this will activate the ng-click angular directive found in the javascript code.
This code simply does a check to see if the dropdown menu is displayed by checking to see if the .dropdown class has a class of 'open'. If not, then it will open the url passed in a new window, otherwise it will remove the 'open' class which hides the dropdown menu.
The issue I have is if I try to click the same .dropdown class to activate the dropdown again it only appears after I click two more times??
I'm obviously not doing the correct way to destroy the dropdown by removing the 'open' class can anyone suggest what I am doing wrong? If i don't click the image (and therefore not activate the ng-click this all works fine), so the issue is related to the doInteractionBodyEvent() and somehow i'm not 'destroying' the dropdown correctly.
// HTML
<div class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
<div>
<div ng-if="interaction.media[0].image" class="image">
<a ng-click="doInteractionBodyEvent(interaction.media[0].href)">
<img ng-src="{{interaction.media[0].image.replace('amp;','')}}" />
</a>
</div>
</div>
// Javascript Angular Controller
$scope.doInteractionBodyEvent = function(url) {
if (angular.element('.dropdown').hasClass('open')) {
angular.element('.dropdown').removeClass('open');
} else {
$window.open(url, '_blank');
}
}
Remove the data-toggle="dropdown" from the HTML
<div class="dropdown-toggle" type="button" id="dropdown1" aria-haspopup="true" aria-expanded="true">
<span class="material-icons">more_vert</span>
</div>
I am currently using Bootstrap 3, with Ruby on Rails and I'm having some issues with a dropdown button. The button does drop down and shows the list items, but upon clicking on one I'm taken to the top of the page and no list item was selected.
Here's the code for the dropdown button - html.erb file
<div class="col-md-5 col-md-offset-2 col-xs-12">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
How many?
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li>1</li>
<li>2-9</li>
<li>10+</li>
</ul>
</div>
</div>
</div>
My knowledge of JS is non-existent so I've been looking at other people's questions but I'm still unable to work it out.
The script also in the html.erb file
<script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('.dropdown-toggle').dropdown()
});
</script>
When running the app the Javascript console throws up a 404 not found for bootstrap.js. I currently have the bootstrap under Vendor/assets/javascripts/bootstrap.js
Should the bootstrap JS files be under app/assets/javascripts?
Hopefully someone is able to shed some light on what I'm doing wrong.
It seems to a href attribute problem in the "a" element. Remove a literal "#" and try again.
And all of loaded file path whatever you want to load from your local storage should be path for based on your local storage too. that is, apps/asset/javascript path is correct.
I have two dropdowns:
First Dropdown:
First Dropdown Code:
<select name="idx" id="masthead_search">
<option value="">Library catalog</option>
<option value="ti">Title</option>
<option value="au">Author</option>
<option value="su">Subject</option>
<option value="nb">ISBN</option>
<option value="se">Series</option>
<option value="callnum">Call number</option>
</select>
Second Dropdown:
Second Dropdown Code:
<select name="branch_group_limit" id="select_library">
<option value="">All libraries</option>
<option value="branch:01">Main Library</option>
</select>
In order to change the highlight background of the option tag when hovered, I converted select and option tag to ul li tag using this jquery code.
/** Convert a select-option tag to ul-li tag to change its dropdown highlight color from blue to green **/
$(document).ready(function(){
/**masthead_search **/
$('#masthead_search').parent().prepend('<div class="btn-group btn-input clearfix"> <button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">Library catalog</span> <span class="caret"></span></button><ul id="newmasthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">');
$('#masthead_search option').each(function(){
$('#newmasthead_search').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newmasthead_search').append('</ul></div>');
$('#masthead_search').remove();
$('#newmasthead_search').attr('id', 'masthead_search');
/**select_library **/
$('#select_library').parent().prepend('<div class="btn-group btn-input clearfix"><button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown"><span data-bind="label">All libraries</span> <span class="caret"></span></button><ul id="newselect_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">');
$('#select_library option').each(function(){
$('#newselect_library').append('<li value="' + $(this).val() + '" role ="presentation"><a tabindex="-1" role="menuitem">'+$(this).text()+'</a></li>');
});
$('#newselect_library').append('</ul></div>');
$('#select_library').remove();
$('#newselect_library').attr('id','select_library');
});
$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
var $target = $( event.currentTarget );
$target.closest( '.btn-group' )
.find( '[data-bind="label"]' ).text( $target.text() )
.end()
.children( '.dropdown-toggle' ).dropdown( 'toggle' );
return false;
});
After executing the code the dropdowns looks like this:
First Dropdown:
First Dropdown Code:
<div class="btn-group btn-input clearfix">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">Library catalog</span>
<span class="caret"></span>
</button>
<ul id="masthead_search" name="masthead_search" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">Library catalog</a></li>
<li value="ti" role="presentation"><a tabindex="-1" role="menuitem">Title</a></li>
<li value="au" role="presentation"><a tabindex="-1" role="menuitem">Author</a></li>
<li value="su" role="presentation"><a tabindex="-1" role="menuitem">Subject</a></li>
<li value="nb" role="presentation"><a tabindex="-1" role="menuitem">ISBN</a></li>
<li value="se" role="presentation"><a tabindex="-1" role="menuitem">Series</a></li>
<li value="callnum" role="presentation"><a tabindex="-1" role="menuitem">Call number</a></li>
</ul>
</div>
Second Dropdown:
Second Dropdown Code:
<div class="btn-group btn-input clearfix open">
<button type="button" class="btn btn-default dropdown-toggle form-control" data-toggle="dropdown">
<span data-bind="label">All libraries</span>
<span class="caret"></span>
</button>
<ul id="select_library" name="branch_group_limit" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
<li value="" role="presentation"><a tabindex="-1" role="menuitem">All libraries</a></li>
<li value="branch:01" role="presentation"><a tabindex="-1" role="menuitem">Main Library</a></li>
</ul>
</div>
But When I resize my Browser Window and click the first button, my first dropdown doesnt show. And when I click my Second Drop-down the dropdown that is shown is the dropdown which is supposedly in my First Dropdown.
First Dropdown:
Second Dropdown:
Where did I go wrong? please help me.
Ok, so this is not really an answer to your question, but I can't fit it into a comment and I think it needs to be said.
You really need to think carefully as to whether for the sake of changing the colour of drop down items you want to do all this. This is a pretty hefty abuse of HTML and looks like it already has (and will continue to) lead you down a rabbit hole of awkwardness and problems. What you are doing here is throwing away a <select> element and replacing it with a <ul>. You might think 'so what', it looks and works fine, and gives you a greater amount of control over styling, let me try and convince you the why you should just stick with a <select>.
You're going to have a lot of fun posting that data
It looks like you are putting these drop downs in as part of a search form. This means it will be within a <form> element with an action to something like http://myawesomewebsite.com/search, and your search button is a submit button. When you hit submit the page will collect up all the form fields in your form and POST them to the search page. How are you planning on making the page POST your selected option? From the looks of one of the comments, it's possible you have some sort of JavaScript somewhere that is updating a hidden <select>? This will work, but isn't super pretty.
Mobiles/Touchscreens play nicely with selects
You're obviously developing with mobiles/touch screen devices in mind. Great! Too many people still don't bother. Native Select elements will (depending on the specific device/browser) render a nice, scrollable list when you click on it, which is much easier for a user on a small screen to tap than a drop down list that could potentially extend beyond the bottom of the users small screen. People browsing on mobiles will expect to see their devices native list picker when they click a drop down list, don't break peoples expectations without good reason.
Styling/positioning issues
Just like the one you are getting now. A native select list will position itself perfectly well. No hacks or even JavaScript required.
Other things
Remember I mentioned 'abuse of HTML' earlier, if you are expecting the user to select from a list, the element that should be rendered is a <select>, that's how the HTML standard was defined. This also helps accessibility devices understand what your element is and what it should do with it. A drop down list rendered as a <ul> doesn't really make sense to a screen reader, but a <select> with <option> tags make perfect sense. I think Bootstrap does quite a good job of helping screen readers understand elements like it's specialist dropdowns, but I'm no expert on accessibility, so I'm not sure.
I don't know about you, but whenever I use a select box, I click it, hit a key on my keyboard that corresponds to the first letter of what I am after and hit enter. You can't do that with a Bootstrap dropdown (although they are keyboard accessible, so that's good). In your case this perhaps doesn't matter too much, as your options are limited, but with more options this becomes a real time saver for the power users among your user base.
Have you also noticed the fact that in the Bootstrap docs they don't even show you an example of how to use a drop down in this way? The only example they provide are based on menus with links, not replacement selects. There is probably a good reason for that.
So, in conclusion
I'm well aware that there will always be reasons to customize things beyond their original spec, but if you can help it always try to use the elements for what they were designed for. There are plenty more pitfalls than I have mentioned here, and any future developers who take over this code will much prefer a simple select box than a convoluted, jQuery dependent solution. I'll admit that styling of select boxes has always been an issue, but from what I have seen of this particular case, I would recommend just sticking with selects.
However, if you still want to go with this solution then can I recommend you create a Bootply of your problem, with all relevant HTML and JavaScript, so we can have a better crack at replicating your issue.
I hope this has not come off as condescending, and I am by no means saying what you are doing is wrong, as I know nothing of your exact situation, I just felt an explanation as to the potential benefits of keeping it simple might help you or future visitors to this question.
I am using Bootstrap3 in my MVC5 application.
When I use #HtmlHelper.DropDownFor to show a drop down list, bootstrap styles are not getting applied for the combo box in Internet Explorer.
So as a workaround, I wrote a custom code to show a drop down list.
<div class="col-md-6 dropdown">
<button class="col-md-6 form-control input-sm dropdown-toggle" data-val="true" role="button" id="SystemSize" name="dropdown1" data-toggle="dropdown" value="llll">
<span class="caret pull-right"></span>
</button>
<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdown1">
#foreach (var item in items)
{
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">#item.Text</a></li>
}
</ul>
</div>
I referred the following bootstrap link to come up with this approach.
I wrote Jquery to update the text of the button on click of the anchor links in the drop down.
The problem is when I submit the form, this button's text is not getting posted.
How do I solve this?
Normally we use Selects instead of drop-down inside forms. Check following link;
http://getbootstrap.com/css/#forms-controls
Example:
<select class="form-control">
#foreach(var item in items)
{
<option value="#(item.Value)" >#item.Text</option>
}
</select>
If you want to use the Drop-down, then you can use hidden field as follow to store the value and set the value within the function you wrote to update the text.
<input type="hidden" id="SystemSize" name="SystemSize" value="">
Thanks!
I have a list of lists of elements. I want to collapse each of these inner lists using a collapsible button from bootstrap. I've tried this:
<button id="button" type="button" data-toggle="collapse" data-target="#demo" style="display : hidden">
Click to collapse
</button>
<c:forEach items="${list.elements}" var="element">
<div id="collapsibleElement" class="collapse in">
${element.content}
</div>
</c:forEach>
This works if I have just one element in the list, after clicking the button the text collapses. However, it doesn't work for more elements in the list. A correct number of buttons is created, however after clicking any button only the text under first button collapses.
The id stays the same for all elements and my guess is that this may be cause of the problem. Any suggestions how to solve this issue?