I have an issue with selector where I am defining as:
<select name='provs[]' id="prov" class="selectpicker" data-live-search="true" required multiple>
However, When I am selecting the data, it doesn't show me the ticks next to the options.
I am using bootstrap 2.3.2 with bootstrap-select. I have the css and js of them added to my asserts. I can choose and get the values however, I am not able to see the ticks next to the options when I am selecting them.
Cheers,
It's always wise to look through the scripts you are using even if they don't mean much, they will make sense after awhile.
Reference: https://github.com/caseyjhol/bootstrap-select/blob/master/bootstrap-select.js
See lines 942-965 and locate near the bottom:
$.fn.selectpicker.defaults = {
.... // bunch of default settings
iconBase: 'glyphicon', // the font family for the checkmark
tickIcon: 'glyphicon-ok', // classname for the checkmark
...
};
This defaults to glyphicon, part of Bootstrap 3. You will need to install this font or you can use Font Awesome (go to their site, follow instructions) and change the two values when you call the script:
$('.selectpicker').selectpicker({
iconBase: 'NameofFOnt',
tickIcon: 'classname'
});
This "problem" still exists within Bootstrap 4 as Bootstrap-select uses Glyphicon. Putting together all the answers this helped me (BS4.3.1, fa 5.7.1, BS-select 1.13.8):
<select data-icon-base="fas" data-tick-icon="fa-check">
Use the snake case as mentioned here
add Font Awesome css in your HTML page.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
and replace these in bootstrap-select.js and bootstrap-select.min.js
iconBase: 'glyphicon', tickIcon: 'glyphicon-ok'
to
iconBase:"fontawesome",tickIcon:"fa fa-check"
If you are talking about way through CDN so, this is the solution:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"type="text/javascript"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"rel="stylesheet" type="text/css" />
<script>
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});
$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
});
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<form action="#" method="POST">
<div class="form-group row">
<div class="col-sm-10">
<select class="form-control selectpicker" id="select-country lstFruits" multiple="multiple" data-live-search="true" >
<option data-tokens="china">China</option>
<option data-tokens="malayasia">Malayasia</option>
<option data-tokens="singapore">Singapore</option>
</select>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and if you want to add the icons offline files so you can import the icons through import, just place the below code above your bootstrap css.
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
Related
Can I get an array that contains references to the fields in a form (like input, textarea, etc.) and in my code run a function on them, like addClass()?
To explain what I want to do - after the user submits the form (and invokes the submit() function in the controller) I want to add a red border color on the invalid input.
ng-class="{'has-error':form.input.$invalid}"
But this isn't working
You can add a condition on your input like ng-class="{'has-error':yourFormName.$submitted&&yourFormName.yourInputName.$invalid}"
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.val={};
});
.has-error{
border-color:red;
}
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-require="angular.js#1.5.x" data-semver="1.5.11"></script>
</head>
<body ng-controller="MainCtrl">
<form name="myForm" novalidate>
<div style="padding: 10px">
<input name="Hazmat" ng-model="val.type" required ng-class="{'has-error':myForm.$submitted&&myForm.Hazmat.$invalid}">
<p ng-show="myForm.$submitted">
<span ng-show="myForm.Hazmat.$error.required">Required</span>
</p>
</div>
<button>Submit</button>
</form>
</body>
</html>
In AngularJS you can dynamically add class formatting to elements using the ng-class attribute. I want to dynamically change whether some text is displayed as plain text or link a hyperlink.
I am also using bootstrap but <a> isn't defined as a class like h1 - h5 are.
For example, for <h1> I can just do this in AngularJS:
<div ng-class="'h1'">This will be displayed as a heading 1.</div>
But this didn't work to display as a url:
<div ng-class="'a'">This will be displayed as text, but I want it to be a URL.</div>
So after the answer from Asiel Leal Celdeiro I just had to add the working code here:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS Example</title>
<!-- JQuery for Bootstrap -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- AngularJS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<p ng-class="{'btn btn-link': isURL}">This can be plain text or formated like a URL.</p>
<br>
<label>
<input type="checkbox" ng-model="isURL">
Make it look like a link
</label><br>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('MyCtrl', ['$scope', function($scope) {
$scope.isURL= false;
}]);
</script>
</body>
</html>
EDITED
If you really need it to be a div you can use:
<!--myController: angular controller on this partial view-->
<!--isURL: indicate whether this text is a URL or not-->
<div ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</div>
or if you can put an a or a button you can use:
<a ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</a>
or
<button ng-class="{'btn btn-link':myController.isURL}">{{myController.text}}</button>
All of them will be displayed as a URL if the myController.isURL expression is true when it's evaluated in by angular and as plain text if not. It basically, puts the classes btn and btn-link if the expression is true.
I am implementing color code picker in angular js. Tried to display the color picker in same line but it is not displaying in same line instead of that it is displaying in next lines.
Plunker
Can anyone help me to show the color code in same line? (don't want to use html-table tag).
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myctrl">
<h1>Hello Plunker!</h1>
<div class="tdata" ng-repeat="color in colors"
ng-class="{'selected':$index == selectedRow}"
ng-click="setClickedRow($index)"
style="background-color:{{color}};">
</div>
</body>
</html>
Change your div to look like this:
<div style="display:table">
<div class="tdata" ng-repeat="color in colors"
ng-class="{'selected':$index == selectedRow}"
ng-click="setClickedRow($index)"
style="background-color:{{color}}; display:table-cell">
</div>
</div>
Try this css for color aligned in same line:
.tdata.ng-scope {
float: left;
}
I have a ckeditor that currently has a height and width of auto, but I would like to make these parameters fixed. I first tried to set the rows and cols but this did not work:
<textarea id="editor1" name="editor1" rows="10" cols="10">
Example text goes here
</textarea>
Then I tried to use the config file with this code (which still doesn't work):
<script>
CKEDITOR.editorConfig = function(config) {
config.height = '100px';
config.width = '100px';
};
</script>
After using both of these methods, the height and width of the ckeditor is still auto (checked with chrome's inspect element feature)
My example: http://strawberrycv.com/test.php
The code to this page:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="ckeditor/ckeditor.js"></script>
<style>
#ckeWrapper{
height: 700px;
width: 600px;
}
</style>
</head>
<body>
<form>
<div id='ckeWrapper'>
<textarea id="editor1" name="editor1" rows="60" cols="90">
the text goes here
</textarea>
</div>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
hey i just started using this plugin but i think i got a clue for u:
find the api here: http://docs.ckeditor.com/#!/api/CKEDITOR.config
And look for the corresponding JS line that should go in the bottom ''
After you have defined the texarea JS takes over, so I'd say you need to do your editing in the JS instead of the CSS.
I created a test project of MVC3,and the project has only one layout of razor.
In the Layout I use a jquery to create dynamic menus,I just want get the effect is when i clicked these menu ,it should return different partial views in the body segment,and the layout menu should remember the menu state i clicked on the layout page.
But the result is ,when i click the menus everytime ,the layout will render again,and the menu state will restore ,how to resolve the problem?
This is my code !!! Can anybody help me?Thanks!!!
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function () {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
});
});
</script>
</head>
<body>
<div class="container">
<div class="header"><img src="/Content/images/logo.png" alt="logo" name="Insert_logo" width="180" height="90" id="Insert_logo" style="background-color: #C6D580; display:block;" />
<!-- end .header --></div>
<div class="sidebar1">
<dl class="nav">
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
<dt>aaaaa</dt>
<dd>
<ul>
<li>AAAA</li>
<li>BBBB</li>
<li>CCCC</li>
</ul>
</dd>
</dl>
</div>
<div class="content">
#RenderBody()
</div>
</body>
</html>
you can specify the layout used on each page if needed.
If you dont want a layout just set it to null.
Put this at the top of the page:
#{
layout = null
}
user,
where you have:
<div class="content">
you need to change that to:
<div id="content">
you then need to target your partial views to update that div. This means that your controller actions should return PartialView(), rather than View(). Also, without worrying about any of the aforementioned, you could simply try changing your click function to:
$(function () {
$(".sidebar1 dl dd").hide();
$(".sidebar1 dl dt").click(function (e) {
$(".sidebar1 dl dd").not($(this).next()).hide();
$(this).next().slideToggle(500);
e.preventDefault();
return false;
});
});
there could be more required as you don't show the ajax code but I'm willing to bet that if you have followed standards in your ajax calls, then this will all resolve itself with the changes mentioned.