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.

AngularJD: Blank Items appearing in ng-repeat on first button click, items appear when clicking button again

I am working on a pretty web application that connects to a RESTful API. My HTML has a "View Employees" button that when clicked, makes an API call to grab all the employees for that company. I am checking the return for the API, and it's getting the entire list, but the page is only rendering the first employee and then blank spaces for the rest. Things get stranger when I go to a different company and click on their View Employees button, because the employees for that company appear, AND one of the blank spaces in the previous company suddenly renders properly. I'm reading the return from the API, and it has all the information I need in a properly formatted way. I'm really confused.
Anyone have any idea what's going on? Here's my HTML. If you need more code please let me know.
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<div class="employee-box" ng-repeat="employee in sigFigCtrl.companies[$index].employees">
<span class="glyphicon glyphicon-edit pull-right" ng-click="sigFigCtrl.toggleEmployeeEdit($index)"></span>
<span class="glyphicon glyphicon-remove pull-right" ng-click="sigFigCtrl.deletePerson(employee._id, $index, sigFigCtrl.companies[$parent.$index].employees)"></span>
<div ng-if="!sigFigCtrl.companies[$index].editEmployee">
<div ng-if="sigFigCtrl.companies[$index].employees.length > 0">
<p><b>Name:</b> {{employee.name}}</p>
<p><b>Email:</b> {{employee.email}}</p>
</div>
</div>
<div ng-if="sigFigCtrl.companies[$index].editEmployee">
<form name="editPersonForm" ng-submit="sigFigCtrl.editPerson(employee._id, $index)">
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonName" id="name" placeholder="Name of Employee" class="form-control" required></input>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" ng-model="sigFigCtrl.editPersonEmail" id="name" placeholder="Email of Employee" class="form-control" required></input>
</div>
<button>SUBMIT</button>
</form>
</div>
</div>
</div>
</div>
Thank you in advance.

Resizing input-group-addon not resizing

I am trying to make a input form with a visual feedback. If the user inputs a number in the input field, the input field along with the addon turns green and a check mark or a cross mark appears next to the currency text.
My issue is that the glypicon overlaps with the currency text all the time. I have tried nesting the second span into the first one as well as modifying margins, paddings to allow for it but the input-group-addon is not budging. What would be a clean and good way of ensuring that the glyphicon is positioned after the currency text?
<div class="col-sm-3 inputGroupContainer">
<div class="input-group">
<input type="number" class="form-control" name="price" value=50 data-moneyamount="moneyamount" required />
<span class="input-group-addon">
USD
</span>
<span class="glyphicon form-control-feedback" aria-hidden="true"></span>
</div>
</div>

ng-show and ng-hide do not fit need sometimes

I am new to AngularJS and one of the awesome things here in AngularJS are the ng-hide and ng-show directives which can be used to display certain parts of the web page or hide the. Now sometimes I don't want to show a part and it works fine then, but then sometimes it works but in an undesirable way.
Example:
<div class="row">
<div class="col-xs-6">
<h2>Login</h2>
<p class="text-danger">{{message}}</p>
<form name="form" novalidate>
<div class="form-group">
<label>Email: </label>
<div class="input-group">
<input type="email" name="email" ng-model="credentials.email" placeholder="Email" class="form-control" required />
<div ng-show="form.email.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.email.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<div class="form-group">
<label>Password: </label>
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-show="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-hide="form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="authenticate(credentials)">Login</button>
Register
</form>
</div>
</div>
Now if the fields are valid the check symbol appears and if they are not the cross apears like so:
But if you look closely the addon with the cross symbol does not have rounded corners and this is probably because the addon with the check symbol is still there but hidden. Now what do I do in such situations. I would like to the div containing the check addon in such case to disappear altogether instead of staying hidden. How to accomplish that?

Try ng-if="form.password.$invalid" and ng-if="! form.password.$invalid" instead; that removes the element from the DOM.
Take a look at the ngIf documentation for further research. Code snippet:
<div class="input-group">
<input type="password" name="password" ng-model="credentials.password" placeholder="Password" class="form-control" required ng-minlength=5 />
<div ng-if="form.password.$invalid" class="input-group-addon">
<i class="fa fa-times-circle"></i>
</div>
<div ng-if=" ! form.password.$invalid" class="input-group-addon">
<i class="fa fa-check-circle"></i>
</div>
</div>

Use ngIf (and a second ngIf with an inverted predicate) instead of ngShow or ngHide. The former will remove elements from the DOM, while the latter will simply hide them with CSS.
From the Angular documentation:
The ngIf directive removes or recreates a portion of the DOM tree based on an {expression}. If the expression assigned to ngIf evaluates to a false value then the element is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
In contrast, the ngShow documentation explains that it hides by adding the .ng-hide class:
The ngShow directive shows or hides the given HTML element based on the expression provided to the ngShow attribute. The element is shown or hidden by removing or adding the .ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag).

clicking subscribe on mailchimp embedded code constantly gives undefined error

I've been having an awful awful time all day trying to get mailchimp in my website.
I have literally copied and pasted the embedded code from the mailchimp website and when I click the subscribe button i'm treated to:
404 Not Found
The requested document was not found on this server. Web Server at
class.travel
I have literally NO idea what is going on. And can't find anything on Google to boot.
Could anyone please point me in the right direction as to why this is happening?
Here's the form I'm using at my website http://class.travel Again, this is just copied and pasted from mailchimp. Is there some sort of API Key or JS files I need to include and it's just not stated on their website????
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="//class.us9.list-manage.com/subscribe/post?u=820adca0d3bcdd8bb18d6c2a9&id=9768ebd530" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<h2>Subscribe to our mailing list</h2>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name </label>
<input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_820adca0d3bcdd8bb18d6c2a9_9768ebd530" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
<!--End mc_embed_signup-->
Also, P.S. Web Noob, reporting in.

Sorry Future on-lookers. I never figured it out.
But putting it in an iframe made it work, for some godly unknown reason.