I create an igDatePicker (via javascript) on an input element that is within a bootstrap column div and the div becomes too tall, throwing off the entire layout.
Please see this jsFiddle: https://jsfiddle.net/808jmrja/10/
Make sure to stretch the Result pane out enough to get multiple columns.
Edit: Will probably also have to create an SSL exception in order for jsFiddle to load the infragistics libraries: https://cdn-na.infragistics.com/igniteui/2015.1/latest/js/infragistics.loader.js
That did it. Thanks. (and thanks for the secure CDN)
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 PetevAssociate Software DeveloperInfragistics, Inc.