We Keep Coding

Bootstrap DateTimePicker inside scrollable modal

I have a bootstrap modal with a body that allows vertical scrolling. Inside of this, I am trying to use a datetime picker, but the problem is that expanding the picker, causes the modal's body to add scroll bars. I need to keep the scrolling ability (for other things that can add content to the modal) but I also need the datetime picker to expand outside of the modal, and not cause the modal to scroll (so that it would occupy the red square without in the pic).
<div class="modal-body" style="overflow-y:scroll;">
<div class="row">
<div class='col-md-4'>
<div class="form-group">
<div class='input-group date' id="datetimepicker3">
<input type="text" class="form-control" data-bind="value: $data.visitdate" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Here is a fiddle: https://jsfiddle.net/axg1010/3xunve7r/

Check out your very first line: <div class="modal-body" style="overflow-y:scroll;">. If you take out the overflow-y:scroll the calendar will project over your modal.

Checkbox is not showing checked when setting value to true

i am using iCheck in an angular application, i have a basic checkbox when checked shows an image. this works perfectly with ng-show, however when i set the value to true within my controller it doesn't return checked when page is loaded.
Controller
$scope.basicIntake = {};
$scope.basicIntake.insurance_cover = true;
html
<div class="row">
<div class="form-group col-lg-6">
<div class="col-lg-12">
<label>
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
click to see image
</label>
</div>
</div>
<div class="form-group col-lg-6">
<div class="col-lg-12">
<img ng-src="http://i.imgur.com/vkW3Lhe.jpg" class="img-responsive img-thumbnail" ng-show="basicIntake.insurance_cover">
</div>
</div>
</div>

This is because your template is not bound to any controller with directive ng-controller.
Your properties are not created till you make any event. like : click.
See this attached fiddle and try to connect.
try to remove ng-controller from top Div to get your problem.
Further: there is no need to have ng-checked, when you already have ng-model

Change:
<input icheck type="checkbox" ng-model="basicIntake.insurance_cover">
to:
<input icheck type="checkbox" ng-checked="basicIntake.insurance_cover" ng-model="basicIntake.insurance_cover" ng-click="checkAll()">
And it will work.
(Miguel Lattuada also suggested it in a comment to your question)

Hiding/Display section in EmberJS

I would like to conditionally hide/display part of a htmlbars template, however I would not like it to be removed from the DOM. If I use the {{if}} block helper it removes it from the DOM. I manage to accomplish this changing the class name with an inline {{if}} helper. I would like to know to if there is a better way to accomplish this?
<div class="{{if (not isEnglishSelected) 'hidden'}} {{if isEnglishSelected 'show'}}">
<div class="form-group">
<label class="col-sm-2 col-md-3 control-label" for="name_en">{{t 'label.name'}}</label>
<div class="col-sm-10 col-md-9">
{{input type="text" class="form-control" id="name_en" value=model.name_en autofocus=true}}
</div>
</div>
<div class="form-group">
<label class="col-sm-2 col-md-3 control-label" for="description_en">{{t 'label.description'}}</label>
<div class="col-sm-10 col-md-9">
{{textarea class="form-control" id="description_en" value=model.description_en rows="5"}}
</div>
</div>
<div class="form-group {{if (not isEnglishSelected) 'show'}} {{if isEnglishSelected 'hidden'}}">
<label class="col-sm-2 col-md-3 control-label" for="description_fr">{{t 'label.description'}}</label>
<div class="col-sm-10 col-md-9">
{{#if isEnglishSelected}}
{{textarea class="form-control"
id="description_fr" value=model.description_en rows="5"}}
{{else}}
{{textarea class="form-control" id="description_fr" value=model.description_fr rows="5"}}
{{/if}}
</div>
</div>
</div>

No, there isn't a better way than using a class to hide it. If you want it to remain in DOM, your class needs to have display:block in its definition. If you want it to be invisible but still retain its dimensions, you need visibility: hidden.

Every view/component in ember is fitted with an isVisible flag that can be toggled. This will do exactly what you you are looking for.
ex.
{{textarea class="form-control" id="description_fr" value=model.description_en rows="5" isVisible=isEnglishSelected}}
{{textarea class="form-control" id="description_fr" value=model.description_fr rows="5" isVisible=isEnglishNotSelected}}
However in this case, I would recommend you push the logic for determining your value up into the controller and eliminate the need for duplication in your view.
As a side note, you can always convert an element to a component/view and apply the isVisible flag as well (in reference to your outermost div with the inline conditional)

Using validate.js with Twitter Bootstrap

I am using Twitter Bootstrap v3.3.4 to create a modal login form. I want to use the validate.js plugin for jQuery to validate the form before I send the data via AJAX. However, even with writing minimal script using the plugin, I am not getting any error from the validation.
Please find below the HTML markup along with the validate.js (version 1.13.1) script. Thanks in advance.
$(document).ready(function(){
$("#loginButton").on("click",function(){
//alert("logining in....");
//jQuery Validate Plugin: http://jqueryvalidation.org/ - 24/05/2015
$("#loginModal").validate({
rules:{
username:{
required:true,
minlength:6
},
password:{
required:true,
minlength:6
}
}
});
});
});
<div class="modal" id="loginModal" role="dialog" aria-labelledby="loginModalWindowLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="loginModalWindowLabel">Sign In</h4>
</div>
<div class="modal-body">
<form onsubmit="return false;" id="loginForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="username">Username</label>
<input class="form-control" id="username" name="username">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="password">Password</label>
<input class="form-control" id="password" name="password">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button type="button" id="loginButton" class="bbcModalbutton pull-right">Login</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
Unable to access your account?
</div>
</div>
<div class="row">
<div class="col-md-12">
Don't have an account? Register FREE
</div>
</div>
</form>
</div>
</div>
</div>
</div>
strong text

because your login modal is not in the DOM yet, its a future element, you need to trigger is on a different syntax:
$(document).on("click", '#loginButton', function(){
//your code
}
Here is a fiddle demonstrating the effect

After about half an hour of going back and forward, I finally solved it. If you look at my original post, you will see that I had the login button as type "Button". For some reason, when I changed it to type submit and it worked. I don't understand why but it works.
Thanks Mark for your help!

First, the plugin automatically captures the click event of a type="submit" button or input. Nothing happens when the type attribute is not set to submit.
Secondly, you don't need to put .validate() inside of a click handler because the .validate() method is only used to initialize the plugin. Then after initialization, the click event of the submit button is captured automatically. (Nor do you need an inline onsubmit event handler.)
$(document).ready(function() {
$("#loginModal").validate({ // <-- initialize plugin
// rules & options
....
The id of your form, LoginForm does not match the selector you attached to .validate(), #loginModal.
Fixing all of that...
Working DEMO: http://jsfiddle.net/654o4wgd/

Why does this jQuery color picker fail within a Bootstrap modal?

I'm using the excellent jQuery color picker from http://colpick.com/plugin
It works correctly under "normal" circumstances but doesn't show the picker when the input parent element is found within a Bootstrap 3 modal.
This works:
<div class="container">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick1" class="colorPick"/>
</div>
</div>
</div>
But the same thing inside a Bootstrap modal fails to show the picker:
<div class="modal-body">
<div class="row">
<div class="col-md-6">
<input type="text" id="colorPick2" class="colorPick"/>
</div>
</div>
</div>
Is there a way to use this color picker within a Bootstrap modal?
Thanks

The problem is z-index just add this line in your css class it works good..
.colpick {
z-index: 9999;
}
Jsfiddle DEMO