I have the following select box appearing in chrome but not in other browsers
Using bootstrap-select (1.12.2 V) to style the select box.
options.html
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit">
<option style="color: #5cb85c;"
ng-repeat="env in ctrl.qSettings.envs">{{env}}
</option>
</select>
html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<link rel="stylesheet
href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<-- bootstrap select -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap
select/1.12.2/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
select/1.12.2/js/bootstrap-select.min.js"></script>
</head>
<body ng-controller="abcCtrl as ctrl">
<div ng-include="'templates/options.html'"></div>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
<-- ui select -->
<script src="node_modules/ui-select/dist/select.min.js"></script>
<link rel="stylesheet" href="node_modules/ui-select/dist/select.min.css">
</body>
</html>
Can you please guide me on what would be wrong here,Thanks.
Try ng-options.
<select ng-model="ctrl.qSettings.env"
ng-change="ctrl.envChanged()"
class="selectpicker"
data-width="fit"
ng-options="env in ctrl.qSettings.envs">
</select>
Related
I am using "Bootstrap Select Plugin Jquery". How do I replace it with Select Jquery code.
I would like to choose the value of the example 2.
Desired result:
enter image description here
MY Code:
$(document).ready(function() {
$('select').selectpicker();
});
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/css/bootstrap-select.min.css" rel="stylesheet"/>
</head>
<body>
<select class="my-select">
<option value="1">First</option>
<option value="2">Second</option>
<option value="3">Other</option>
</select>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select#1.13.9/dist/js/bootstrap-select.min.js"></script>
</body>
</html>
$('.my-select').selectpicker('val', '2');
PLNKR example of problem
The label reads Group By, but the letters are all superimposed for some reason.
Here is the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Label font</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/pure.css">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="//builder.yaas.io/public/js/vendor/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="UICtrl">
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-g">
<div class="pure-u-md-1">
<label for="graphType">Group By: </label>
<select id="graphType" class="pure-input-1">
<option disabled selected value> -- Select a Graph Type --</option>
<option> Graph type 1 </option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
The problem goes away if I don't use the Pure CSS library. Is there anyway I can have the label font without messing up while keeping the Pure CSS?
You can customize your label css
label {
letter-spacing: 0.1em;
}
With my code below, I am trying to style my bootstrapped select picker with the "btn-warning style" as seen here: https://silviomoreto.github.io/bootstrap-select/
Here what my code looks like:
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="drake.css"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
</head>
<body>
<div id="course2">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</div>
</body>
As you can see, the select picker is not taking on the style or width attributes. What am I doing wrong? Thanks so much!
Fixed the URLs for you.
Notice I've moved the javascript files just before the closing tag </body> for faster page loading, and keep the css files at the <head>.
The problem was that you were using the incorrect url for bootstrap-select libraries. You can easily address those errors by using browser's developer tools, and then... well.. do some magic. :D
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
EDIT: Also, why are you linking two bootstrap versions? 3.3.5 css and 2.3.1 js/css? You should use the latest only... try it
<head>
<title>Title</title>
<meta charset="utf-8">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
</head>
<body>
<div id="course2">
<select class="selectpicker" data-style="btn-primary" data-width="500px">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.selectpicker').selectpicker();
});
</script>
</body>
How to check if select2.js has at least one option selected?
The code bellow shows the message 'Please select at least one item in the list.' even after selecting one item.
$('form.validate-form').validator({
disable: false
});
$( "select.validate" ).each(function() {
$(this).validator();
$(this).get(0).setCustomValidity('Please select at least one item in the list.');
});
How can I make the message 'Please select at least one item in the list.' disappear after selecting at least one option?
I am using Bootstrap validator plugin.
jsfiddle
SOMETHING LIKE THIS
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.12.0/jquery.validate.min.js" type="text/javascript"></script>
<style>
.mySelect {
width: 300px;
}
</style>
</head>
<body>
<form id="myform">
<select multiple="true" class="mySelect" name="item" required>
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
<input type="submit" name='submit' value="Submit">
</form>
<script>
$(document).ready(function() {
$(".mySelect").select2();
$("#myform").validate(
{
rules:
{
item:
{
required: true
}
}
});
});
</script>
</body>
</html>
I have the following code for a widget. The widget is a searchpod. The file is searchPod.html
<select class="search-by" id="searchBy">
<option value="search_by">Search By</option>
<option value="lastname">Employee Last Name</option>
<option value="ssn">Employee SSN</option>
<option value="eeid">Employee EEID</option>
<option value="claim_number">Claim Number</option>
<option value="leave_number">Leave Number</option>
</select>
I have another file called SPTest.js which tries to use that select above. This function is inside a test function since we are also using QUnit to do unit tests.
define(
['../Widget/SearchPod/searchPod'],
function () {
function checkSearchBy()
{
test('check if select has "Search By" text', function () {
alert($("#searchBy option[value='search_by']").text());
alert($('#searchBy23').find('option:selected').text());
var expected = "Search By";
deepEqual($("#searchBy option[value='search_by']").text(), expected,
"We expect dropdown text to display 'Search By' by default");
});
}
return {
runny: runny,
checkSearchBy: checkSearchBy,
};
I can't figure out why my .js file can't find the select by its id.
I'll put the HTML output below for those who'd like to see:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CLR Javascript Unit Test</title>
<link rel="stylesheet" href="Style/qunit.css">
<link rel="stylesheet" href="Style/cupertino/jquery-ui-1.10.1.custom.min.css" />
<link rel="stylesheet" href="Style/jquery.jscrollpane.css" />
<link rel="stylesheet" href="Style/jquery.dataTables.css" />
<link rel="stylesheet" href="Style/Report.css" />
<link rel="stylesheet" href="Style/GlobalReportStyles_10_css.css" />
<style type="text/css">
</style>
<script type="text/javascript" src="Scripts/Lib/qunit.js"></script>
<script type="text/javascript">
QUnit.config.autostart = false;
</script>
<script data-main="Scripts/App" src="Scripts/Lib/require.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Test Results<button id="test">Test DOM</button></li>
<li>Report Viewer<button id="btnSPTest">
Test Search Pod</button></li>
<li>Transactional</li>
</ul>
<div id="tabs-1">
Testing is fun!
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</div>
<div id="tabs-2">
<iframe width="100%" height="600px" src="ViewReportPage.aspx"
id="viewreport"></iframe>
</div>
<div id="tabs-3">
<iframe width="100%" height="600px" src="BuildReport.aspx" id=""></iframe>
</div>
</div>
</body>
</html>
Any explanation would help. Thank you.