I have just started coding in Intel XDK. Instead of showing select items in usual way (drop down menu), i want them to show in popup and select one of item from there. I have gone through several sites, but i could not find a single example which will give me the desired result.
<div data-role="fieldcontain">
<label for="select-choice-1" class="select">Choose shipping method:</label>
<select name="select-choice-1" id="select-choice-1" data-native-menu="false" >
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
<option value="express">Express: next day</option>
<option value="overnight">Overnight</option>
</select>
</div>
It seems easy to implement in Jquery. But my problem is , i can only use APIs exposed by Intel XDK. I see there exists javascript file in plugins folder named af.selectBox.js. But i was unable to trace out how to use that. I tried Intel XDK documentation also. But no luck.
If you were inclined to broaden your options, I came across this one, that did what you want. BUT it uses jQuery and Bootstrap:
<div class="form-group">
<label class="control-label col-sm-offset-2 col-sm-2" for="company">Company</label>
<div class="col-sm-6 col-md-4">
<select id="company" class="form-control">
<option>small</option>
<option>medium</option>
<option>large</option>
</select>
</div>
</div>
2nd Answer
Related
I know this has been asked elsewhere but this is in regards to the very latest version of Bootstrap-select.
The README.MD states the component now has support for Bootstrap 5. But code that worked perfectly in Bootstrap 4 but was broken with Bootstrap 5 looks no different after upgrading to 1.14.0.
It functions okay. But it doesn't look right.
Again, this worked perfectly with version v1.13.14 and Bootstrap 4.
<div class="col-md-4">
<div class="mb-3">
<label class="control-label" for="User_Roles">Roles</label>
<select class="form-select selectpicker" multiple id="User_Roles" name="User.Roles">
<option value="Staff">Staff</option>
<option value="Manager">Manager</option>
<option value="Admin">Admin</option>
</select>
<span class="text-danger field-validation-valid" data-valmsg-for="User.Roles" data-valmsg-replace="true"></span>
</div>
</div>
I just started learning bootstrap (version 3), so there are difficulties (even in terminology). Such a question: how to separate div blocks from each other? I mean that the content of these blocks on the site should not be back to back. For example, I have 2 divs, how can I write so that the content on the site is separate?
<body>
<div class="row form-inline">
<div class="col-sm-15">
<label class="small">Options:</label>
<select class="form-control" title="" name="testGroup" id="testGroup194">
<option selected="selected" value="">ALL</option>
<option title="Option A" value="14">Option A</option>
<option title="Option B" value="15">Option B</option>
<option title="Option C" value="16">Option C</option>
</select>
</div>
<div class="col-sm-16">
<label class="small">Name</label>
<input type="text" class="form-control" value="" name="patientName">
</div>
</div>
</body>
Also a question on code (it's not mine). What does col-sm-15 and col-sm-16 mean? In the grid, a maximum of 12 columns is possible, but there are more.
Since you are referring to gutters, you can now check the corresponding documentation at https://getbootstrap.com/docs/4.0/layout/grid/#no-gutters.
As for col-md-16 this is auto-layout-columns, new in Boostrap 4 : https://getbootstrap.com/docs/4.0/layout/grid/#auto-layout-columns
See this question for more info : N number of columns in Bootstrap 4
I'm wondering why a string when used as the value in a <\select> tag (not ng-select) will load the saved drop down value on a page refresh but an integer will not display a value. Assuming that formData.maritalStatus equals "Married" or "1" depending on the example value below.
This works when formData.maritalStatus = "Married"
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
<div class="col-sm-4">
<select class="form-control" name="maritalStatus"
ng-model="formData.maritalStatus">
<option value=""></option>
<option value="Married">Married</option>
<option value="Single">Single</option>
<option value="Divorced">Divorced</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
This does not work when formData.maritalStatus = "1"
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="maritalStatus">Marital Status</label>
<div class="col-sm-4">
<select class="form-control" name="maritalStatus"
ng-model="formData.maritalStatus">
<option value=""></option>
<option value="1">Married</option>
<option value="2">Single</option>
<option value="3">Divorced</option>
<option value="4">Widowed</option>
</select>
</div>
</div>
This is purely educational as the string works for my needs.
Unfortunately this does not natively work with older versions of AngularJS. AngularJS 1.6.x and above will work work using the ng-value directive (this will give you what you are looking for).
<option ng-value="1">Married</option>
However, there is a solution that can be found in the AngularJS Docs that essentially uses a parser and formatter. The formatter converts the int-to-string when the model changes and the parser does the opposite (string-to-int).
https://code.angularjs.org/1.4.6/docs/api/ng/directive/select#binding-select-to-a-non-string-value-via-ngmodel-parsing-formatting
Take a look at the link above to view the solution for apps using anything before 1.6.x (taken directly from the AngularJS Documentation). If you haven't taken a look already, I think you could also benefit from using ng-options. It is used to for dynamic lists instead of hardcoded options.
Take a look if you'd like!
https://code.angularjs.org/1.5.11/docs/api/ng/directive/ngOptions
I copied a code where it works good in mozilla but, when i go to chrome it doesn't work correctly. I have this in mozilla, where it works like it is an input type where when you type the start letter, the select box will show something like it suggest.
Here is the code :
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-2" id="labelcheck-up" for="fname">Diagnosis:</label>
<div class="col-sm-2">
<select name="tdiagnosis[]" id="tdiagnosis" class="form-control select2" multiple="multiple" data-placeholder="Please input diagnosis here">
<option value="Dog">Dog</option>
<option value="Cat">Cat</option>
<option value="Goat">Goat</option>
</select>
</div>
</div>
</form>
Here is jsfiddle link:
https://jsfiddle.net/DTcHh/40338/
Any suggestions how to make this work in google chrome? Thanks.
For instance, I have a page that has some forms that are directives. I would like to store every input element on the page into a variable, but some of these elements are hidden behind ng-if's.
How can I get these elements regardless of whether or not they are currently visible on the view? Currently I am using
var selects = document.getElementsByTagName('select');
This is ran on the directive that corresponds with the templateHTML below:
<div>
<label>Are you planning to attend a commencement ceremony at the Athens Campus? </label>
<select id="ceremony" name="ceremony" ng-model="gradCeremony" ng-options="option.value as option.name for option in options" required>
<option value="">Selection Required</option>
</select>
</div>
<div>
<label class="control-label" for="regional-ceremony">Are you planning to attend a recognition ceremony at one of the regional campuses?</label>
<select id="regional-ceremony" ng-model="regionalCeremony" ng-options="option.value as option.name for option in options">
</select>
</div>
<!-- This one is hidden by default -->
<div ng-if="regionalCeremony">
<label>Please indicate the regional campus</label>
<select id="regional-campus-ceremony" ng-model="regionalCeremonyCampus" ng-options="c.code as c.name for c in campuses" required>
<option value="">Selection Required</option>
</select>
</div>
As you can see, that last option is hidden behind an ng-if. It is not picked up in the array of inputs like I would like it to be.
This code is called with this in the html:
<form name="Form" commencement application="application" campuses="campuses" submitting="submitting"></form>