DatePicker in inline-form from Bootstrap

[Kabanets]

Hello,

I have a form with using bootstrap style inline-form.

I want insert a DatePicker with a Label to form-group.

```

<div class="form-group">

    @Html.LabelFor(model => model.DateFrom, htmlAttributes: new { @class = "control-label" })

    @Html.EJS().DatePickerFor(model => model.DateFrom).Render()

</div>

```

How can I use class form-control from bootstrap for the DatePicker to get behavior inline-form?

I have this problem with another controls from EJS...

Thank you,

Regards, Andrew

[Ashokkumar Balasubramanian]

Hi Kabanets, 

 

Good day to you. 

 

Our Syncfusion form controls are rendered with “display:flex and width as 100%” as an inbuilt style. So, it will be rendered with one by one as a block component. So, we suggest you provide width as auto for the form component by using cssClass as mentioned in the below code example to achieve your requirement. 

 

<form class="form-inline"> 

    @Html.LabelFor(model => model.DateFrom, htmlAttributes: new { @class = "control-label" }) 

    @* cssClass will be added to the wrapper element of the component *@ 

    @Html.EJS().DatePickerFor(model => model.DateFrom).CssClass("e-inlineForm").Render() 

 

    @Html.LabelFor(model => model.DateFrom, htmlAttributes: new { @class = "control-label" }) 

    @Html.EJS().NumericTextBox("sdhg").CssClass("e-inlineForm").Render() 

 

</form> 

<style> 

    .form-inline .e-inlineForm { 

        width: auto !important; 

    } 

</style> 

 

Sample:  

 

https://www.syncfusion.com/downloads/support/forum/147519/ze/MVC_EJ2_Sample_147519_inline-1641250123 

 

Could you please check the above sample and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B. 

[Kabanets]

Hi, Ashokkumar Balasubramanian

Thank you for answer.

How can I get behaviour the label as with standard bootstrap form-controls for small displays?

Regard, Kabanets

Attachment: Screenshot_20190916_at_17.26.47_1e0ff7f0.zip

[Ashokkumar Balasubramanian]

Hi Kabanets 

 

For this scenario, you can define the width as 100% to achieve the behavior of label as standard bootstrap form-controls in the small display. Please refer the below code block. 

 

<form class="form-inline"> 

    <div class="form-group"> 

        @Html.LabelFor(model => model.DateFrom, htmlAttributes: new { @class = "control-label" }) 

        @* cssClass will be added to the wrapper element of the component *@ 

        @Html.EJS().DatePickerFor(model => model.DateFrom).CssClass("e-inlineForm").Render() 

    </div> 

    <div class="form-group"> 

        @Html.LabelFor(model => model.DateFrom, htmlAttributes: new { @class = "control-label" }) 

        @Html.EJS().NumericTextBox("numeric").CssClass("e-inlineForm").Render() 

    </div> 

</form> 

<style> 

    .form-inline .e-inlineForm { 

        width: auto !important; 

    } 

 

    @@media only screen and (max-width : 400px) { /* You can provide the max-width as per your display resolution*/ 

        .form-inline .e-inlineForm { 

            width: 100% !important; 

        } 

    } 

</style> 

 

Please let us know, if you require any further assistance on this. 

 

Regards, 

Ashokkumar B.