igDatePicker height in Bootstrap columns

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://secure-cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.loader.js"></script>
<div class="container-fluid body-content">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                    <label class="control-label text-right col-xs-4 col-sm-6 col-md-6" for="Value1">Date</label>
                    <div class="col-xs-4 col-sm-6 col-md-4 col-lg-6">
                        <input class="form-control" data-val="true" data-val-date="The field must be a date." data-val-required="The field is required." id="Value1" name="Value1" type="text" value="4/17/2015 10:44:46 PM" />
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                    <label class="control-label text-right col-xs-4 col-sm-6 col-md-6" for="Value2">Value2</label>
                    <div class="col-xs-4 col-sm-6 col-md-4 col-lg-6">
                        <input class="form-control" id="Value2" name="Value2" type="text" value="" />
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                    <label class="control-label text-right col-xs-4 col-sm-6 col-md-6" for="Value3">Value3</label>
                    <div class="col-xs-4 col-sm-6 col-md-4 col-lg-6">
                        <input class="form-control" id="Value3" name="Value3" type="text" value="" />
      ...

CSS

.ui-igedit.ui-igedit-container {
    box-sizing: content-box;
}
.ui-igedit-field.form-control {
    /* hide inner input shadow */
    box-shadow: none;
}
.ui-igedit-focus.ui-state-focus {
    /* apply the same shadow (.form-control) to the editor instead */
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

JavaScript

$(function () {
    $.ig.loader({
        scriptPath: "https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/js/",
        cssPath: "https://secure-cdn-na.infragistics.com/igniteui/2016.2/latest/css/",
        theme: "bootstrap",
        resources: "igEditors",
        ready: function () {
            $("#Value1").igDatePicker({
                width: "100%",
                display: "block",
                height: "34px", //same as .form-control
                maxValue: new Date(),
                dateInputFormat: "yyyy/MM/dd",
                dateDisplayFormat: "yyyy/MM/dd",
                valueChanged: function (evt, ui) {
                console.log("new value: " + ui.newValue);
                }
            });
        }
    });
});