MultiSelect shows inconsistent Placeholder Font and Width

4 posts, 0 answers
  1. Wayne
    Wayne avatar
    24 posts
    Member since:
    Feb 2011

    Posted 13 Jun 2013 Link to this post

    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?

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Richard
    Richard avatar
    1 posts
    Member since:
    Mar 2013

    Posted 06 Sep 2013 Link to this post

    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
  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 10 Sep 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready