Hi,
I want to make my DatePicker responsive by placing it inside a div which has a bootstrap col-lg-3 class applied to it (which will give it a col-log-3 width). I want to make my datepicker as wide as the col-lg-3 div so that it may become responsive. In order to make the igCombo responsive I had to use Width("100%") and place it inside the col-lg-3 div to make it responsive, but in datepicker Width("100%") is not working, It tells me to provide an int? in place of width which would require me to give it a hardcoded integer which wont make it respoinsive. How can I make my datepicker input field responsive just like I did with igCombo using 100% width & placing it inside a div with bootstrap class applied to it.
Thanks.
Hey zep lin,
Thank you for your question.
I hope that I am not missing something from your scenario, if so please let me know. As I understand there is an issue when you try to set the width of DatePicker. Could I ask you, on widget or wrapper you are trying to set it, for both you should provide only integer value as it is shown here (https://www.igniteui.com/help/api/2014.1/ui.igdateeditor#options:width), if its MVC wrapper you could set it also like the example below:
If this information is not helpful to you, could you please send me isolated sample where the issue is reproduces, in order to investigate it further for you.
@(Html.Infragistics() .DatePicker() .ID("startDatePicker") .Width(100) .DateDisplayFormat("date") .Required(true) .NullText("Enter Date") .DropDownTriggers("focus") .ButtonType(TextEditorButtonType.None) .MinValue(DateTime.Now.Date) .Render() )
Looking forward to hearing from you.
Hello Zdravko,
I was not asking about that. I meant , I want to make the width of my datepicker control dynamic(Responsive) by enclosing it between bootstrap divs so that the datepicker control can take the width of the div. If its a wide screen the datepicker will be wide, If its a mobile , the datepicker will adjust itself.
The same issue is discussed in this thread but for igCombo. In igCombo we can put the igCombo inside div with bootstrap class & then setting its width to 100%:
http://ko.infragistics.com/community/forums/t/92035.aspx
In datepicker how can I do that because I cannot set 100% width on it because it requires an int, whereas in igCombo I was able to set Width("100%")
I dont want to explicitly give an integer value because it will defeat the purpose of a responsive control. In your example you are setting Width(100) which will set the width of datepicker to 100 pixels no matter how wide or narrow the screen is, the control will remain 100pixels (Not responsvie). I dont want to o that, I want to make it responsive, The datepicker should take the width of the div it is enclosed in (My div with bootstrap class applied on it ). I hope you get my point.
Hello zep lin,
Thank you for your clarifications.
We have a know issue with our editors (including DatePicker) which says "If editor is rendered as an INPUT or TEXTAREA element without a SPAN element wrapper, then width and height can be set to a string with percent and other html units". You can inspect the html element (datepicker) and will see that the input element is wrapped in a span element, this is why we cannot set the width in percentages directly. We have two options though:
First is to use the widget instead of the wrapper as I am showing you below:
http://jsfiddle.net/sdtn51Ly/2/
Second is to perform width changing when the page is rendered for example:
$("#datePicker").width("100%")
This also will set the width to "100%"
Known issues and limitations:
http://help.infragistics.com/Help/Doc/jQuery/2014.1/CLR4.0/html/igEditor_Known_Issues.html
Thanks. Got it.