Three dots instead of ddl using Firefox

2 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 01 Oct 2015 Link to this post

    I have dropdownlists in a kendo grid. In IE and Chrome, it all works without issue. In Firefox, the dropdownlist will change to three dots if I shrink the browser width enough. What is the reason for this and how can I have Firefox behave like IE/Chrome where it doesn't change from the dropdownlist to the 3 dots?

    See attached of example of what I mean.

     

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 05 Oct 2015 Link to this post

    Hello Ed,

    This behavior is by design and is due to the following CSS rule which is applied to the <span> with k-input class: 

    .k-dropdown .k-input {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    There are two options in this case:

    1. Override the text-overflow property. For instance: text-overflow: clip;
    2. If the Grid is configured for inline editing you should set larger column width, so there is enough space for the DropDownList and its text.
      Regards,
      Plamen Lazarov
      Telerik
       
      Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
       
    1. Kendo UI is VS 2017 Ready
    Back to Top