I am facing an issue regarding bootstrap select. Below is my code
<pre>
<div class="form-group">
<label class="col-md-3 control-label">Issue Items to:</label>
<div class="col-md-4">
<asp:DropDownList runat="server" CssClass="form-control selectpicker" data-
live-search="true" ID="ddlIssueItems" ClientIDMode="Inherit"
AutoPostBack="true"></asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvIssueItemsto" runat="server"
ControlToValidate="ddlIssueItems" InitialValue=0 ErrorMessage="Required!">
</asp:RequiredFieldValidator> </div>
</div>
</pre>
The Above code display the dropdownlist with live search. When i select option from list the whole dropdownlist disappear or hide.
Please help me.
Thanks
Related
The code is
<div _ngcontent-pvu-c241="" class="col-sm-6 col-md-4 col-lg-3">
<ng-select _ngcontent-pvu-c241="" name="customer_invitation_status" class="form-ng-select ng-select-clearable ng-select ng-select-single ng-pristine ng-valid ng-touched ng-select-bottom">
<div class="ng-select-container">
<div class="ng-value-container">
<div class="ng-placeholder">Customer Invitation</div>
<!----><!---->
<div role="combobox" aria-haspopup="listbox" class="ng-input" aria-expanded="false"><input aria-autocomplete="list" type="text" autocorrect="off" autocapitalize="off" autocomplete="a19ee7afde6a" readonly=""></div>
</div>
<!----><!----><span class="ng-arrow-wrapper"><span class="ng-arrow"></span></span>
</div>
<!---->
</ng-select>
</div>
When a person clicks on the div with a role of combobox, it adds this to the above HTML in addition to adding some cosmetic classes as well.
<ng-dropdown-panel role="listbox" aria-label="Options list" class="ng-dropdown-panel ng-select-bottom" id="a19ee7afde6a" style="opacity: 1;">
<!---->
<div class="ng-dropdown-panel-items scroll-host">
<div></div>
<div>
<div class="ng-option ng-option-marked" role="option" aria-selected="false" id="a19ee7afde6a-0">
<!----><span class="ng-option-label">Reservation Sent</span><!---->
</div>
<div class="ng-option" role="option" aria-selected="false" id="a19ee7afde6a-1">
<!----><span class="ng-option-label">Reservation Not Sent</span><!---->
</div>
<!----><!----><!----><!----><!----><!---->
</div>
</div>
<!---->
</ng-dropdown-panel>
I noticed that using .click! does absolutely nothing, but using
execute_script("arguments[0].click(), dropdown)
where dropdown can be obtained by grabbing the element with the name 'customer_invitation_status' or the element with the text 'Customer Invitation' inside of it.
DOES do something, but only after the Watir script crashes (The click happens after the script ends as opposed to during). While it's running, I'm not able to find the new elements: aka the span/element with the text, 'Reservation Not Sent' or ID of 'a19ee7afde6a-1' that should show up as as result of the click.
After the script crashes due to not being able to click on the span with the text 'Reservation Not Sent' because it doesn't exist, the click happens.
I have this basic example of trying to use ng-show. I effectively only want to show a portion of the page if 'GB' is selected from the country drop down box. I have validated that the ctrl recieves 'GB' in it when i select GB from the dropdown box. However, the elements are not hidden on the page initially and selecting things from the select box has no impact. I'd appreciate any help.
<ng-form name="directorsForm" cc-pitch-form="5" ng-controller="work.myCtrl as ctrl">
<div class="row cc-form__group">
<div class="columns large-3">
<label>Country</label>
</div>
<div class="columns large-3 left">
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" />
</div>
</div>
<div ng-show="ctrl.selectedCountry =='GB'">
<div class="columns large-3">
<label>Enter address</label>
</div>
</div>
</ng-form>
replace this line
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" />
like this
<select ng-options="country.code as country.name for country in ctrl.countryList" ng-model="ctrl.selectedCountry" ></select>
self closing in select is not working in angular i hope it helps!!
In the form I am designing, I would like to show a < input="date"> field for anniversary-date if the user selects a radio button with value = "married".
For now, I have replaced the same with a div saying "Anniversary date input will appear here".
My problem is that, user.maritalStatus == 'married' is always set to false.
I know this because ng-show doesn't show the message. ng-hide shows this message.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="form-group">
<div class="btn-group col-md-6 col-md-offset-4" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="single" data-ng-model="user.maritalStatus">Single
</label>
<label class="btn btn-default">
<input type="radio" name="maritalStatusRadioBtn" value="married" data-ng-model="user.maritalStatus">Married
</label>
</div>
</div>
<!-- following does NOT work -->
<div data-ng-show="user.maritalStatus == 'married'">Anniversary date input will appear here</div>
I followed these examples:
http://codepen.io/SusanneLundblad/pen/iBhoJ
OnClick radio button show hide div angular js - the one answered by michael (highest upvotes)
but I am not getting it to work.
Thanks!
EDIT:
Codepen link: http://codepen.io/vipulnj/pen/KperpO
You would need to wrap your content inside <div ng-app=""> </div> if you have not already
in the following code I have one drop-down list (serviceSmallId) for type of service.
It is populated using model info.
There is a second field check-box which should only be visible when drop-down has a selected value of 'Weekly'. I am trying to use ng-show/ hide of angular.
I tried to search for possible solutions but no luck.
Can anyone please guide me what I am doing wrong.
<section id="scrubber-view" class="mainbar" data-ng-controller="scrubber as vm">
<section class="matter">
<div class="container">
<div>
<button class="btn btn-info" ng-click="vm.goBack()"><i class="fa fa-arrow-left"></i>Back</button>
<button class="btn btn-info" ng-click="vm.cancel()" ng-disabled="!vm.canSave"><i class="fa fa-undo"></i>Cancel</button>
<button class="btn btn-info" ng-click="vm.save()" ng-disabled="!vm.canSave"><i class="fa fa-save"></i>Save</button>
<span ng-show="vm.hasChanges" style="color:orange" class="dissolve-animation ng-hide"><i class="fa fa-asterisk"></i></span>
</div>
<div class="row">
<div class="widget wblue">
<div data-cc-widget-header title="{{vm.title}}" subtitle="{{vm.scrubber.scrubberId}}"></div>
<form class="form-horizontal">
<div class="form-group">
<label for="serviceSmallId" class="col-sm-2">Service</label>
<div class="col-sm-4">
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']">
</select>
</div>
</div>
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
<input class="form-control" type="checkbox" id="fullyFlanged" value="Bar" />
</div>
</form>
</div>
</div>
</div>
</section>
</section>
There probably is a more elegant "angular way" solution,
but I updated you code to work here - http://jsbin.com/tupisoriho/1/edit?html,js,output
Explanation of changes
Provided ng-show a value vm.checker
added ng-change to the select element and gave it a function checkerGo which tested to see if dropdown == 'weekly', if yes change vm.checker
Update
there is a more "angular way" - using expressions!
As per #Omri Aharon fiddle/comment below.
You don't need to get the value property because a ng-model don't hold the element but the value itself;
<div class="form-group" ng-show="vm.scrubber.serviceSmallId.value=='Weekly'">
must be
<div class="form-group" ng-show="vm.scrubber.serviceSmallId == 'Weekly'">
EDIT: In your case vm.scrubber.serviceSmallId will contain the ID and not the description Weekly. I suggest you to use ng-change directive to call a function in your controller that will find the item based on ID and set in the controller to be visible for ng-show.
<select class="form-control" id="serviceSmallId" ng-model="vm.scrubber.serviceSmallId"
ng-options="item.dataLookupId as item.description for item in vm.serviceSmalls | orderBy:['sortOrder','description']"
ng-change="vm.selectObj()">
vm.selectObj() will find and set the current selected object in the scope to an controller variable (ex.: vm.selectedItem) and:
<div class="form-group" ng-show="vm.selectedItem.description=='Weekly'">
I'm working with Bootstrap 3 and the AngularJS UI.
I've integrated a Datepicker into an accordion, but it doesn't show over/outside the accordion body in itself.
I found a reference on the same problem and the solution (here), but it's with Bootstrap 2.3.1 and after trying the .collapse{ position:inherited; } solution on my code and trying to override the z-index, it's still not working.
Here's a Plunker with the problem on 2.3.1 so you can understand the problem, and my current code. Any ideas on what's causing the problem?
<div class="row ix-advanced">
<div class="panel-group col-md-12" id="accordion">
<div class="panel panel-default">
<div id="advancedSearch" class="panel-collapse collapse">
<div class="panel-body">
<form class="form-inline" role="form">
<div class="form-group col-md-1">
<label><?php echo _t('Date')?></label><br />
<input type="text" class="form-control input-sm" datepicker-popup="dd-MM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" placeholder="<?php echo _t('From')?>"/>
</div>
<div class="form-group col-md-1">
<label><?php echo _t('To')?></label><br />
<input type="text" class="form-control input-sm" placeholder="<?php echo _t('To')?>">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
in your css, overwrite bootstrap's panel overflow: hidden property with
.panel-group .panel {
overflow: inherit;
}
The solution is to add to the last datepicker the following attribute:
datepicker-append-to-body="true"
You may also want to change the attribute "open" to "is-open".
You can see the results in the updated plunker.
I've updated the plunker to the latest versions and it seems to work fine.
My problem though is that if you layout your controls with the grid system, then the popup is clipped to fit the row and col-
-Stephen