I use bootstrap-select in my form to display some suppliers, but it looks like this:
My select looks like this:
<select class="selectpicker" data-live-search="true" title="Choose Supplier">
<option data-tokens="Supplier 1">Supplier 1</option>
<option data-tokens="Supplier 2">Supplier 2</option>
<option data-tokens="Supplier 3">Supplier 3</option>
<option data-tokens="add Supplier">Add Supplier</option>
</select>
The .css file is linked in the head tag and the .js is linked at the end of the site. What is the problem with this code? In the examples it looks the same but on my site it do not work. What am I missing or doing wrong?
in example using bootstrap-select.min.css
that's why not show you like example.
<html>
<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
</head>
<div class="container">
<div class="row">
<h2>Bootstrap-select example</h2>
<p>This uses https://silviomoreto.github.io/bootstrap-select/</p>
<hr />
</div>
<div class="row-fluid">
<select class="selectpicker" data-show-subtext="true" data-live-search="true">
<option data-subtext="Rep California">Tom Foolery</option>
<option data-subtext="Sen California">Bill Gordon</option>
<option data-subtext="Sen Massacusetts">Elizabeth Warren</option>
<option data-subtext="Rep Alabama">Mario Flores</option>
<option data-subtext="Rep Alaska">Don Young</option>
<option data-subtext="Rep California" disabled="disabled">Marvin Martinez</option>
</select>
<span class="help-inline">With <code>data-show-subtext="true" data-live-search="true"</code>. Try searching for california</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</html>
Related
This question already has answers here:
Font Awesome icon in select option
(10 answers)
Closed 3 years ago.
Is it possible to add font-awesome icon to<option> in <select>?
<body ng-app>
<i class="fa fa-camera-retro"></i> fa-camera-retro<br>
<select ng-model="choice" class="fa">
<option value="">Choose</option>
<option value="icon camera">icon camera</option>
<option value="icon bell">icon bell</option>
<option value="icon bicycle">icon bicycle</option>
</select>
Since font-awesome icons are fonts, they can be added to options by Unicode:
<script src="//unpkg.com/angular/angular.js"></script>
<link rel="stylesheet" href="//unpkg.com/font-awesome/css/font-awesome.css">
<body ng-app>
<i class="fa fa-camera-retro"></i> fa-camera-retro<br>
<select ng-model="choice" class="fa">
<option value="">Choose</option>
<option value=" camera"> camera</option>
<option value=" bell"> bell</option>
<option value=" bicycle"> bicycle</option>
</select>
<br>
Choice = <span class="fa">{{choice}}</span>
<br><span class="fa">--</span>
</body>
The DEMO on PLNKR
The Font-Awesome Cheatsheet
Hi I am creating a dropdown in angular js while selecting values some whitespaces are getting attached to dropdown values.
Template
<div class="row control-group">
<label class="col-xs-4 col-sm-4 col-md-3 col-lg-3 control-label">{{::'label.identity'|translate}}</label>
<div class="col-xs-7 col-sm-7 col-md-9 col-lg-9 controls">
<select id="selectIdentity" name="selectIdentity" required ng-trim="true" ng-change="changedValue(addUser.identityProvider)" ng-model="addUser.identityProvider" >
<!-- Empty option necessary for placeholder to work -->
<!-- <option value="">{{::'define.selectval'|translate}}</option> -->
<option ng-repeat="idprovider in identityProvider"
ui-select2="select2IdentityProvider"
class="selectIdentity"
ng-selected="identityProvider"
ui-select2="select2LocaleSettings">
{{idprovider}}
</option>
</select>
<span class="help-block"
ng-show="addUserForm.selectIdentity.$error.required">
{{::'error.required'|translate}}
</span>
</div>
</div>
JS code
$scope.identityProvider = ['Customer','Employee'];
Try something like this :-
<select id="selectIdentity" name="selectIdentity" ng-model="addUser.identityProvider">
<option value="">Select</option>
<option value="value 1">{{'Value 1'}}</option>
<option value="value 2">{{'Value 2}}</option>
</select>
This code tested and there are no white space:
<select class="select2_single form-control" ng-model="module_id" tabindex="-1" ng-init="get_model_value()" id="module_id">
<option ng-repeat="item in moduleData" ng-selected="item.selected" value="{{item.id}}">{{item.module}}</option>
</select>
this will hide the first white space in dropdown
<option value="" selected hidden />
this selected hidden will hide the white space
<select id="selectIdentity" name="selectIdentity" required ng-trim="true" ng-change="changedValue(addUser.identityProvider)" ng-model="addUser.identityProvider" >
<option value="" selected hidden />
<option ng-repeat="idprovider in identityProvider"
ui-select2="select2IdentityProvider"
class="selectIdentity"
ng-selected="identityProvider"
ui-select2="select2LocaleSettings">
{{idprovider}}
</option>
</select>
Okay, I really can't find the right term/words to describe this. Basically, I have a select control and a div with ng-repeat
<select ng-model="selectedCode" >
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" >
<option value="">ALL</option>
<option value="John">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-repeat="item in myList" ng-if="item.code==selectedCode && item.Name==selectedName" >
<!--show some data-->
</div>
That code kinda works but I have no idea how to show all if the selected item is "ALL".
This Expression will Display all items with the selected code or name, if the other select is set to "ALL". It will also display all items, if both select boxes are set to "ALL". And it will show only the matching items with the correspondant name and code, if none of the select boxes has been set to "ALL".
ng-if="(selectedCode==item.code || selectedCode=='') &&
(selectedName==item.name || selectedName=='')">
To preselect a value, so the ng-if gets applied directly after page load, you may add an ng-init Expression for setting a default value, like so.
ng-init="selectedCode=''"
ng-init="selectedName='John'"
To put all this into a context, here is an example, showing a table with ng-repeat and the two select boxes for utilizing the ng-if Expression. The code "" and the name "John" are preselected and I added the JavaScript block.
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="ngApp">
<select ng-model="selectedCode" ng-init="selectedCode=''">
<option value="">ALL</option>
<option value="A">Option A</option>
<option value="B">Option B</option>
<option value="C">Option C</option>
</select>
<select ng-model="selectedName" ng-init="selectedName='John'">
<option value="">ALL</option>
<option value="John" selected="selected">John</option>
<option value="Peter">Peter</option>
</select>
<div ng-controller="ngController">
<table>
<tr>
<th>Code</th>
<th>Name</th>
</tr>
<tr ng-repeat="item in myList" ng-if="(selectedCode==item.code || selectedCode=='') && (selectedName==item.name || selectedName=='')">
<td>{{item.code}}</td>
<td>{{item.name}}</td>
</tr>
</table>
</div>
</div>
<script>
angular.module('ngApp', [])
.controller('ngController', function($scope) {
$scope.myList = [ {code:'A', name:'John'}, {code:'B', name:'Peter'}, {code:'C', name:'Peter'} ];
});
</script>
</body>
</html>
I've the following <select> element:
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
When an option is selected, I'm changing text like so.
<section>
Greetings, <span ng-bind="pTitle"></span> Jones!
</section>
This works great. Now what I'd like to do is change other text based on the ng-bind change.
For example, in the <section> below, based on their choice I'd switch between his and her:
<section>
According to <span ng-bind="pTitle"></span> Jones, his **(or her)** coding ability needs some work!
</section>
What's the proper way to get this done? Thanks in advance.
You could use a custom filter that transforms the selected value to the wanted pronoum.
Like:
angular.module('myApp').filter('possessivePronoum', function() {
return function(title) {
return title === 'Mr.' ? 'his' : 'her';
};
});
And use it like this:
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-bind="pTitle | possessivePronoum"></span> coding ability needs some work!
</section>
Warning: untested code
You can use ng-if
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, <span ng-if="pTitle=='Mr.'">His</span><span ng-if="pTitle=='Mrs.'||pTitle=='Ms.'">Her</span> coding ability needs some work!
</section>
</div>
Update: Angular 1.1.5 added a ternary operator, so now we can simply write
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' ? 'His' : 'Her' }} coding ability needs some work!
</section>
</div>
or in previous versions
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<div ng-app>
<select ng-model="pTitle">
<option value="Mr.">Mr.</option>
<option value="Mrs.">Mrs.</option>
<option value="Ms.">Ms.</option>
</select>
<section>
According to <span ng-bind="pTitle"></span> Jones, {{ pTitle == 'Mr.' && 'His' || 'Her' }} coding ability needs some work!
</section>
</div>
So I'm switching an internal style guide for a site we're working on from regular html to use reactjs. I've got example code and I'm using highlighting with prism.js. The highlighting seems to work fine, but line breaks don't. Even putting in br tags after every line has no effect. Anyone have any thoughts on this?
Just some example code:
var Example = React.createClass({
render: function() {
return (
<div class="highlight">
<pre>
<code class="language-markup">
<label class="select">
<select class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
</code>
</pre>
</div>
);
}
});
React.render(<Example />, document.getElementById('example'));
When it renders it looks like this.
<label class="select"><select class="selector"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></label>
But I expect it to look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css" rel="stylesheet"/>
<div class="highlight">
<pre>
<code class="language-markup">
<label class="select">
<select class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
</code>
</pre>
</div>
Anyone know of a way to preserve the line breaks?
You can just code like this:
var Example = React.createClass({
render: function() {
return (
<div class="highlight">
<pre>
<code class="language-markup">
{`
<label class="select">
<select class="selector">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
`}
</code>
</pre>
</div>
);
}
});
Demo is here.
The only shortage is the indent.
First: Use ReactDOMServer.renderToStaticMarkup to render component to string
var inner = ReactDOMServer.renderToStaticMarkup(
<label className="select">
...
</label>
);
After Use JS Beautifier to prettify your string
inner = html_beautify(inner);
Finnaly Insert it to your code as string
<code className="language-markup">
{inner}
</code>
Url: http://jsfiddle.net/ohwz5ry2/2/
Just give children like this and it will work like a charm.
<pre>
<code class="language-markup">
{`
.ui-datatable table {
border-collapse:collapse;
width: 100%;
table-layout: fixed;
}
`}
</code>
</pre>