Date picker renders on a separate line in Bootstrap 3 form

[Bojan Kuhar]

Hi,

I would like DataPicker in the same line as other controls in the form but it is rendered in a separate line. After DatePicker, the button is also in the new line. If I leave out DataPicker, all controls in the form are in the same line. 

<div class="row">
    <div class="span12">
        <div class="well account-search">
            <form class="form-inline">
                <div class="form-group">
                        <label  for="Account">Search: </label>
                        <input type="text"  autofocus="autofocus" name="searchString" id="Account" value="@Model.PID">
                        <label for="datePortfolio">Portolio Date: </label>
                        @Html.EJ().DatePicker("datePortfolio").Value(@Model.PortfolioDate).EnablePersistence(false).DateFormat(eCubeWP.Helpers.Common.SF_DATEFORMAT)
                        <button type="button" id="loadPortfolio" class="btn btn-primary">Show Portfolio</button>
                    </div>
            </form>
 
        </div>
    </div>
</div>

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Bojan, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked with your query. In EJ DatePicker, display style of the  wrapper element is set as block. So, DatePicker control will render in new line and takes up the whole width. We can override the display style of the wrapper element of DatePicker control as inline-block to render it in the same line with other controls in the form. Please, check out the below sample code to render DatePicker control as per your requirement. 

 

Solution 1: 

 

[DatePicker.cshtml] 

 

<div class="row"> 

    <div class="span12"> 

        <div class="well account-search"> 

            <form class="form-inline"> 

                <div class="form-group"> 

                    <label for="Account">Search: </label> 

                    <input type="text" autofocus="autofocus" name="searchString" id="Account" value=""> 

                    <label for="Account">Search: </label> 

                    <input type="text" autofocus="autofocus" name="searchString" id="Account" value=""> 

                    <label for="datePortfolio">Portolio Date: </label> 

                    <span id="Datepicker1"> 

                        @Html.EJ().DatePicker("datePortfolio").Value("").EnablePersistence(false) 

                    </span> 

                    <button type="button" id="loadPortfolio" class="btn btn-primary">Show Portfolio</button> 

                </div> 

            </form> 

        </div> 

    </div> 

</div> 

<style> 

    #Datepicker1 { 

        display:inline-block; 

        position:relative; 

        top:10px; 

    } 

    </style> 

      

Solution 2: 

 

[DatePicker.cshtml] 

<div class="row"> 

    <div class="span12"> 

        <div class="well account-search"> 

            <form class="form-inline"> 

                <div class="form-group"> 

                    <label for="Account">Search: </label> 

                    <input type="text" autofocus="autofocus" name="searchString" id="Account" value=""> 

                    <label for="Account">Search: </label> 

                    <input type="text" autofocus="autofocus" name="searchString" id="Account" value=""> 

                    <label for="datePortfolio">Portolio Date: </label> 

                        @Html.EJ().DatePicker("datePortfolio").Value("").EnablePersistence(false) 

                    <button type="button" id="loadPortfolio" class="btn btn-primary">Show Portfolio</button> 

                </div> 

            </form> 

        </div> 

    </div> 

</div> 

<style> 

    .e-datewidget { 

        display:inline-block; 

        position:relative; 

        top:10px; 

    } 

    </style> 

 

For your convenience, we have attached a sample to meet your requirement. Please, download the sample from the below link. 

 

Sample:  http://www.syncfusion.com/downloads/support/forum/135449/SYNCFU~3-449949531.ZIP  

 

Regards, 

 

Shameer Ali Baig S. 

[Bojan Kuhar]

Thank you,

the solution works.

Regards

Bojan

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Bojan, 

 

Thanks for the update. We are happy to hear that the issue is resolved at your end. Please get back to us if you need any further assistance.  

 

Regards, 

 

Shameer Ali Baig S.