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
Related
im trying to do a basic applescript that move from one tab to another in a web page form. But can't find the right way and im asking for help.
This is the web page (part) code:
<div class="modal-body">
<div id="formContainer">
<input type="hidden" id="impuestosValida" value="0">
<input type="hidden" id="infoAduaValida" value="1">
<input type="hidden" id="cuentaValida" value="1">
<form id="formularioConcepto" novalidate="novalidate" method="post" data-title="Concepto">
<div id="advertenciaConceptos" class="alert alert-warning" style="display:none;">
<strong>¡Advertencia!</strong>
<span></span>
</div>
<ul id="tabsConcepto" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tabConceptos" onclick="validaEdicion(this);">Concepto</a></li>
<li><a data-toggle="tab" href="#tabImpuestos" style="" onclick="deshabilitaBotonAceptar();">Impuestos</a></li>
<li><a data-toggle="tab" href="#tabInfoAduanera" style="display:none;" onclick="deshabilitaBotonAceptar();">Información aduanera</a></li>
<li><a data-toggle="tab" href="#tabCuentaPredial" style="display:none;" onclick="deshabilitaBotonAceptar();">Cuenta predial</a></li>
</ul>
Im trying to do with "do JavaScript", but at this point, im now just guessing with something like this:
tell application "Safari"
activate
do JavaScript "document.getElementById('formContainer').childNodes[0].click()" in document 1
end tell
Any ideas? Really appreciated.
I can’t tell because I don’t see the whole HTML, but I assume you’re trying to click the li tags under the "tabConcepto" ul which would change the tab.
In that case you should change the javascript line to:
do JavaScript "document.getElementById('tabsConcepto').getElementsByTagName('a')[0].click()" in document 1
Change the 0 to which number tab you want to active. Remember to turn on "Allow JavaScript from Apple Events" under Safari’s Develop menu to allow this to run.
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!
Requirement
I want to put a login form inside the drowdown menu with username and password field, I am able to do that. all works well except the below issue,
Issue
While typing i am not able to use the arrows keys(up/down) in firefox , this works well when the input is outside the drowdown code. This works fine with other browsers like google crome.
Firefox version is 26
Bootstrap version : 3.03
jquery 1.10
Question:
how to resolve this problem, is there an problem with jquery or twiter's js, as it works well when i move the input outside the dropdown
Fiddle
here is the fiddle that replicates the same::: http://jsfiddle.net/santoshjoshi/WKU6M/3/
Code:
<div id="navbar-example" class="navbar navbar-static">
<div class="container" style="width: auto;">
<div class="nav-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav pull-left">
<li id="sign-up-dropdown" class="dropdown closed noshow">
Sign Up<b class="caret"> </b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation">
<div class="login_dropdown platform-font-1">
<form class="form-horizontal" action="login" method="POST">
<div class="form-group">
<div class="col-lg-10">
<input type="text" class="form-control " id="email" name="email" placeholder="Email"> </input>
</div>
</div>
</form>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<!-- Arrow keys works with the below input but not the one inside drop down -->
<input type="text" class="form-control " id="email1" name="email" placeholder="Email"> </input>
Looks like kind of bug to me but as a simple fix, stop propagation of onkeydown event:
DEMO
$('#email').on('keydown',function(e){
e.stopPropagation();
});
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();
});