Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
595
Responsive Datepicker using twitter bootstrap
posted

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.

Parents
No Data
Reply
  • 20255
    Offline posted

    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.

Children