MultiSelect shows inconsistent Placeholder Font and Width

[Wayne]

I have a simple view with an AutoComplete, a MultiSelect, and an IntegerTextBox side-by-side with no other styling.

@Html.Kendo().AutoComplete().Name("AutoComplete").Placeholder("AutoComplete")

@Html.Kendo().MultiSelect().Name("MultiSelect").Placeholder("MultiSelect")

@Html.Kendo().IntegerTextBox().Name("IntegerTextBox").Placeholder("IntegerTextBox")

The AutoComplete and IntegerTextBox are the same width as each other and have the same font for the placeholder. The MultiSelect is radically different - it fills the width of the page and its placeholder has Arial font, which differs from the other two.

What's going on?

[Petur Subev]

Hello Wayne,

In contrast to the AutoComplete and the IntergerTextBox widget where the visible part of the input is actually an HTML input element, the MultiSelect widget uses a div element in which the tags are inserted. And since the div behaves as a block element - it uses the whole space for the row and thus it causes that different look.

However you can override the width or change the display mode like this:

@Html.Kendo().AutoComplete().Name("AutoComplete").Placeholder("AutoComplete")

@Html.Kendo().MultiSelect().Name("MultiSelect").Placeholder("MultiSelect").HtmlAttributes(new { style="width:147px;"})

@Html.Kendo().IntegerTextBox().Name("IntegerTextBox").Placeholder("IntegerTextBox")

<script type="text/javascript">
    $(function () {
        $('#MultiSelect').data().kendoMultiSelect.wrapper.css('display', 'inline-block');
    })
</script>

 

Regards,
Petur Subev
Telerik

[Richard]

Hello Petur,

Why is this not fixed in a new release of KendoUI? The multiselect on safari (iPad) shows small characters. It looks completely different than placeholders of other controls. 

Best Regards,
Ernstjan Freriks

[Petur Subev]

Hello Jeroen,

I tried on several Apple devices and the characters look fine. Take a look at the attached screenshot. 

http://img94.imageshack.us/img94/6369/yzpp.jpg

Kind Regards,
Petur Subev
Telerik