template not overflow

6 posts, 1 answers
  1. Peter
    Peter avatar
    51 posts
    Member since:
    May 2016

    Posted 19 Aug 2016 Link to this post

    Hi,

    How can a template overflow in a toolbar?

    In http://demos.telerik.com/kendo-ui/toolbar/index  I change

    {
        template: "<input id='dropdown' style='width: 150px;' />",
        overflow: "never"
    },

    to

    {
        template: "<input id='dropdown' style='width: 150px;' />",
        overflow: "always"
    },

    but the dropdownlist doesn't overflow.

    Peter

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2067 posts

    Posted 23 Aug 2016 Link to this post

    Hello Peter,

    As documented in the following help article, when you define a template without defining an overflowTemplate, the overflow of that item will be handled as "never", regardless of the fact that you are explicitly setting it to "always":
    With that in mind, please define your overflowTemplate in order to get the desired behavior:


    Regards,
    Konstantin Dikov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Peter
    Peter avatar
    51 posts
    Member since:
    May 2016

    Posted 23 Aug 2016 in reply to Konstantin Dikov Link to this post

    Hi Konstantin,

    thank you. But it doesn't work with the dropdownlist:

    {
      template: "<input id='dropdown' style='width: 150px;' />",
      overflowtemplate: "<input id='dropdown' style='width: 150px;' />",
      overflow: "always"
    },

     

    would be nice, you can fix the modified example: Toolbar: dropdown with overflow

    Regards,

    Peter

  4. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2067 posts

    Posted 23 Aug 2016 Link to this post

    Hello Peter,

    The correct property is "overflowTemplate". Here is the working example:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  5. Enrico
    Enrico avatar
    11 posts
    Member since:
    Oct 2011

    Posted 07 Apr in reply to Konstantin Dikov Link to this post

    Hello,

    I have the same problem of Peter, but I'd like to use overflow:"auto" for the dropdownlist.

    If in the dojo I change the dropdown overflow from "always" to "auto" I have a wrong behavior:

    http://dojo.telerik.com/aBAPi/18

    Is there a way to have a dropdownlist in a toolbar in "auto" mode?

    Thank you very much

  6. Ianko
    Admin
    Ianko avatar
    1720 posts

    Posted 11 Apr Link to this post

    Hello Enrico,

     

    Note the auto mode (which is default) will show the item only when the viewport is shrinking to a size where the toolbar item is not visible.

     

    Also, note that both overflow and normal templates are rendered to the DOM and same DOM elements with same IDs is not suggested to be used.

     

    Check out this dojo here: http://dojo.telerik.com/aBAPi/20.

     

    On a side note, due to UX best practices, when it comes to dropdown-like tools in the overflow, we recommend rather using plain buttons that open a dialog of some sort with the more complex tools instead of using them directly in the overflow part. Or, if the overflow functionality is to be used in mobile only, you can safely use the native select element.

     

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top