I have created a smart search component inside a dropdown menu. User should be allowed to search within the dropdown depending upon the value entered in the input=text provided in menu.
But when i am clicking on the input the menu gets closed.
I tried using preventDefault as well but still it is not working.
HTML:
<input type="text" readonly="readonly" value="">
<button class="btn i dropdown-toggle" data-toggle="dropdown"> <i class="caret-down"></i>
</button>
<div class="dropdown-menu smart">
<input type="text" placeholder="Search">
<ul class="search-options">
<li>Something</span>
</li>
</ul>
</div>
JS:
// jQuery to prevent default close
$('body').on('click', '.dropdown-menu.smart input', function (event) {
event.preventDefault();
});
Write the following code and it should keep the dropdown open
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
Related
I'm using the Smooth-Scroll plugin from the following git - link.
It works great in places like navbar where I used it as follows:
<nav class="navbar">
<ul>
<li>Home</li>
<li>Skills</li>
<li>Service</li>
<li>end</li>
</ul>
</nav>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
However, on the same screen, I have a search button inside a form and I had liked it to act as the navbar - I want that once the user clicks on the search button it will smooth-scroll to the next section.
My form looks like this and I tried the following:
<form method="POST" class="hiscore_query">
<input type="text" placeholder="username" id="username" autocomplete="off">
<button type="submit" href="#skills"><i class="fa fa-search"></i></button>
</form>
and I tried to change my js into:
<script>
var scroll = new SmoothScroll('button[href*="#"]');
</script>
but nothing happens.
Is there any way to make that search button do that smooth scroll?
Thank you
<button>s can't be used as links. Change <button type="submit" href="#skills"><i class="fa fa-search"></i></button> to <i class="fa fa-search"></i>.
I'm using Angular 5.1.2 + Bootstrap 3.3.7 + ngx-bootstrap 2.0.0-rc.0.
I'm trying to create a dropdown Login Page.
<ul class="nav navbar-right">
<li class="dropdown" dropdown>
<a href="#" dropdownToggle class="dropdown-toggle" data-toggle="dropdown">
<img src="assets/images/login_logo.png" alt="" class="img-responsive">
</a>
<!-- Dropdown Form -->
<ul *dropdownMenu class="dropdown-menu" role="menu">
<form class="form-group" action="index.html" method="post">
<input class="form-control form-control-sm" type="text" placeholder="Enter your name">
<input class="form-control form-control-lg" type="text" placeholder="Enter your name">
</form>
</ul>
The dropdown is working fine, but the problem is that when we click on the content of drop down( i.e input field in this case), the dropdown gets disappear. This is because when we click on it, a call is send back to the bootstrap to close it, and it is the expected behaviour. To prevent the call going back, we have to use jQuery function:
$('.dropdown-menu input').click(function(e) {
e.stopPropagation(); //This will prevent the event from bubbling up and close the dropdown when you type/click on text boxes.
});
However, i don't want to use jQuery with Angular. Is there any other solution available?
Try this:
<input ... onclick="(event||window.event).stopPropagation()">
(event||window.event) is for IE compatibility-- in IE, event will be undefined so window.event is used instead instead. If you need it to work on IE8 or earlier, you'll want to add something to use cancelBubble if stopPropagation isn't available.
See How to stop event propagation with inline onclick attribute? for related details
I'm currently working on an ordering system that allows the user to choose a specified vendor from a dropdown-menu and comfirm their selection by clicking a seperate button.
A perfect example would be the Fallout 4 store page, where the "Order"-button is disabled until an item has actually been selected from the dropdown menu. (In my case there is only one dropdown menu).
I've got the following HTML:
<div class="col-md-12">
<div class="productRow">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-5">
<div class="dropdownPositionLeft">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Choose your platform!
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<!-- List of vendors -->
<li><a tabindex="-1">Item I</a></li>
<li><a tabindex="-1">Item II</a></li>
<li><a tabindex="-1">Item III</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-5">
<div class="dropdownPositionRight">
<!-- This is the button that confirms the selection and takes the user to the specified vendor from the dropdown menu -->
Order now!
</div>
</div>
</div>
</div>
And the following javascript that replaces the label of the dropdown-button:
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));}
I want the "Ordner now"-button to be able to receive an external link to a vendor based on the dropdown menu. Meaning I would need to pass a variable to the button from the dropdown menu - So far I haven't managed to succeed in this.
I'm very new to both bootstrap and javascript and was hoping someone here might point me in the right direction as to how I should handle this.
I'm assuming I should be able to store an href-value with the items in the dropdown-menu and pass them on to the order-button when selected, but I've had no luck in trying to figure this out while at the same time not pointing the player directly to the vendor through the dropwdown-menu.
I've also experimented with forms without the desired effect. Obviously I'm doing something wrong, but not sure as to what it is.
Check out the information for using bootstrap buttons here: http://v4-alpha.getbootstrap.com/components/buttons/
I usually take the button and then wrap it in the tag like this:
<button type="button" class="btn btn-primary" disabled>Primary</button>
Notice how I made the button disabled by default, then you can use javascript/jquery to remove the disabled attribute when a certain action is performed on the page.
As far as setting it based on a different box being selected, you can also set the href="" attribute using jquery if you want it to live update without reloading the page, or if you're not worried about the page needing to be reloaded, you could use inside the href quotes.
I have this input field:
<div class="btn-group btn-xs" dropdown>
<input id="simple-btn-keyboard-nav" ng-model="available_fields_query" id="single-button" dropdown-toggle ng-disabled="disabled" placeholder="Add New Field" focus-me="true">
</input>
<ul class="dropdown-menu" role="menu" aria-labelledby="btn-append-to-body">
<li role="menuitem" ng-repeat="item in availableFields | iwSearch: available_fields_query">
{{item | toUserListHeader}}
</li>
</ul>
</div>
And if I click it(click on input) everything is working, dropdown/search/model/filter works, but if I focus it with Tab it does nothing, so I guess there is a difference between clicking on an element and focusing it with a tab.
How can I trigger all the same functions with a tab select, like if I was clicking on an element?
As #ThibaudL pointed out, the click event differs from the focus event since it triggers the focus event as well whereas the focus does not trigger the click.
If you want to call addField(item) on both events, I suggest using ng-focus instead of ng-click.
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!