Extra div around the input and span

[john west]

I'm trying to get the date picker to follow a label.  All the other input boxes follow my labels just fine, but the datepicker always goes to the next line.  I tried adding the line below to the datepicker, but still no go.  I also tried inline-block and various widths.  I just can't find the magic.  My questions are 1) is there a setting to prevent the date picker input and span from being wrapped with a div, and 2) if not, how can I keep it on the same line as my label.

.HtmlAttributes(new { @style = "display:inline;width:300px" })

Thanks for any advice you can give.

[Dimo]

Hello John,

The DatePicker by default is an inline-block element, so it is able to exist on the same line as other elements or DatePickers. Here is a demo, which shows this:

http://demos.telerik.com/aspnet-mvc/datepicker

Setting display:inline to the DatePicker will surely not work, because there is a block element inside, which will make the component fall on a new line.

All the best,
Dimo
the Telerik team

[john west]

The demo page is also showing it below the label.  I've attached a screenshot.

[john west]

Never mind on that.  I see where you have the datepicker inline.  I still have the problem, though.  Here's more info.

Here's my code for the label and datepicker.

<p>
    @Html.LabelFor(x => x.ProjectionPolicy.ClaimPaymentDate)
    @(Html.Telerik().DatePicker()
        .Name("ProjectionPolicy.ClaimPaymentDate")
        .ShowButton(true)
        .Value(Model.ProjectionPolicy.ClaimPaymentDate)
    )
</p>

Notice that the datepicker is clearly inside the paragraph.  The source reflects that.

<p>
        <label for="ProjectionPolicy_ClaimPaymentDate">Claim Payment Date</label>
        <div class="t-widget t-datepicker"><div class="t-picker-wrap"><input class="t-input" id="ProjectionPolicy_ClaimPaymentDate" name="ProjectionPolicy.ClaimPaymentDate" /><span class="t-select"><span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span></span></div></div>
    </p>

However, using inspector on the page shows the datepicker *outside* the paragraph. 

<p>
<label for="ProjectionPolicy_ClaimPaymentDate">Claim Payment Date</label>
</p>
<div class="t-widget t-datepicker">
<div class="t-picker-wrap">
<input id="ProjectionPolicy_ClaimPaymentDate" class="t-input" name="ProjectionPolicy.ClaimPaymentDate" autocomplete="off">
<span class="t-select">
<span class="t-icon t-icon-calendar" title="Open the calendar">Open the calendar</span>
</span>
</div>
</div>
<p></p>

Can you think of any reason for this to happen?  I have to assume some javascript is creating or moving elements around, but that's just a suspicion?  But something is causing the elements to move outside the paragraph other than my code, unless I'm just totally missing something on my end.  Thoughts?

 

 

[Dimo]

Hi John,

A reasonable explanation for the observed phenomenon is that <div>s are not allowed inside <p>s - this is not valid HTML code.

Greetings,
Dimo
the Telerik team