Hello,

As all elements float to the left without a row, the higher first will indeed push the next new line to the side. The extra height comes from the inner input the igDatePicker wraps plus a bit of extra alignment – by default the picker sets inline-block (which tends to create a bit of extra space , thus outgrowing the original inputs even more).

The easiest solution is to simply set the editor display to block (to keep with the other inputs) and you can also adjust the height:

$( "#Value1" ).igDatePicker( {
   width: "100%",
   display : "block",
   height:34, //same as .form-control
   maxValue: new Date(),
   dateInputFormat: "M/d/y",
   dateDisplayFormat: "M/d/y",
});

Note that the above is combined with box-sizing reset for the picker and the same can also be achieved in CSS overrides as well.

Updated fiddle: https://jsfiddle.net/damyanpetev/0LLuocbv/ I’ve also moved the shadow from the inner editor to the outer container so it fits better.

P.S. You can use the secure version of the Infragistics CDN to avoid having to deal with certificate-domain mismatches.

Regards,
Damyan Petev
Associate Software Developer
Infragistics, Inc.