[Solved] TimePicker whitespace

[David]

The Timepicker control has a large amount of whitespace around it, even when the popup button is switched off.  I want to place two or more TimePickers side by side and have no white space between them, I'd also like to alter the width of the TimePickers. 

Essentially:

<%= Html.Telerik().TimePicker().Name("t1").ShowButton(false).OpenOnFocus(true) %>
<%= Html.Telerik().TimePicker().Name("t2").ShowButton(false).OpenOnFocus(true) %>
<%= Html.Telerik().TimePicker().Name("t3").ShowButton(false).OpenOnFocus(true) %>

Should appear like:

<input type="text" style="width:50px;" />
<input type="text" style="width:50px;" />
<input type="text" style="width:50px;" />

I'm using MVC2. I've tried messing around with the .t-widget .t-timepicker .t-picker-wrap and .t-input CSS but can't find a way to remove it.

[Georgi Krustev]

Hello David,

 
In order to achieve your goal you will need to set width of the input using InputHtmlAttributes like so:

.InputHtmlAttributes( new { style="width:50px"})

If you need to set width to the DIV wrapper you will need to use HtmlAttributes.

Also you will need to modify t-picker-wrap class in order to remove applied padding. Here is a code snippet showing how to achieve this:

#TimePickerID .t-picker-wrap
{
      padding : 0;
}

Best wishes,
Georgi Krustev
the Telerik team

[David]

Thanks Georgi, that's perfect.

For anyone interested the final code I'm using in order to have the time drop downs fit correctly is:

        <%= Html.Telerik().TimePicker()
            .Name("t1")
            .ShowButton(false)
            .OpenOnFocus(true)
            .InputHtmlAttributes(new { style = "width:60px" })
            .HtmlAttributes(new { style = "width:65px" })%>        

        <%= Html.Telerik().TimePicker()
            .Name("t2")
            .ShowButton(false)
            .OpenOnFocus(true)
            .InputHtmlAttributes(new { style = "width:60px" })
            .HtmlAttributes(new { style = "width:65px" })%>

        <%= Html.Telerik().TimePicker()
            .Name("t3")
            .ShowButton(false)
            .OpenOnFocus(true)
            .InputHtmlAttributes(new { style = "width:60px" })
            .HtmlAttributes(new { style = "width:65px" })%>